/* reset */ *{ margin: 0px; padding: 0px; font-family:\5FAE\8F6F\96C5\9ED1,STHeiti Light;} html{ color: #333;} li{list-style: none;} a{text-decoration: none; color: #333; cursor: pointer;} .clear-fix:after{content: ""; display: block; clear: both;} .clearFix:after{content: ""; display: block; clear: both;} button{cursor: pointer;} img{border:none;} table{ margin:auto;} .display-r-st { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .video-mask{display: none; position: fixed;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);top: 0;left: 0;z-index: 9999;} .video-mask video{width: 800px;height:600px;position: absolute;left: 50%;margin-left: -400px;top:170px;background: #000;outline: none;} .video-mask .close{width: 60px;height: 60px;position: absolute;top: 20px;right: 20px;background: url(../images/product/make/video-close-btn.png);cursor: pointer;} /* 通用分页插件样式 */ .total-num{color: #ccc; font-style: normal; font-size: 12px;} .total-num > i{font-style: normal; color: #333; } .pager .pager-item{-webkit-box-sizing: border-box;box-sizing: border-box; padding: 8px 7px; display: inline-block; margin-right: 5px; color: #333; border: 1px solid #ddd; cursor: pointer;text-decoration: none; border-radius: 3px;font-size: 12px;line-height: 12px;} .pager .pager-item.disabled{ cursor: not-allowed; background-color: #eee; color: #000;} .pager .pager-item.active{background-color: #CC3333; color: #fff; } /* 通用分页插件样式 end*/ /* 首页通用标题*/ #home .title{display: inline-block; text-align: center; padding: 60px 0px;font-style: italic; font-weight: 300;} #home .title.pb10{padding-bottom: 10px;} #home .title h3{position: absolute; top: 0px; left: 0; right: 0; border: 0; margin: auto; font-size: 28px; color: #333;} #home .title .bg-text{position: relative;font-size: 55px;font-weight: 300;color: rgba(28, 31, 37, 0.05);line-height: 99px; text-align: center;} #home .title.white .bg-text h3{color: #fff;} #home .title.white .bg-text{color: rgba(255, 255, 255, 0.05);} #home .title p{color: #B5B5B5; font-size: 20px;} #home .title p.red{color: #C7403B;} /* 通用选项卡功能 */ .header-area{border-bottom: 1px solid #e4e4e4; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff; width: 100%; -webkit-transition: all linear .8s; -o-transition: all linear .8s; transition: all linear .8s; line-height: 60px;} .header-area.bg-transparent{background: transparent;} .tabs-header{position: relative; display: inline-block;} .tabs-title{ display: inline-block; height: 40px; color: #666; position:relative; font-size:18px;} .tabs-scrollbar{position: absolute; left: 0px; bottom: 4px; content: ""; width: 55px; height: 2px; background-color: #c74038; -webkit-transition: all ease-out .2s !important; -o-transition: all ease-out .2s !important; transition: all ease-out .2s !important;} .tabs-title li{-webkit-box-sizing: border-box;box-sizing: border-box;float: left; text-align: center; margin-right: 100px; padding-bottom: 13px; cursor: pointer; -webkit-transition: none !important; -o-transition: none !important; transition: none !important; } .tabs-title li.active-title{font-weight:bolder; } .tabs-title li.active-title >a {font-weight:bolder; color:#c74038;} #home .tabs-title li.active-title{color:#c74038;} .tabs-title:last-child{margin-right: 0px;} .tabs-title li:last-of-type{margin-right: 0px;} .tabs-content{width: 100%; height: 600px; padding-top: 60px;} .tabs-content .tab-box{width: 100%; height: 390px;} .tabs-content .tab-box{display: none;} .dev-content .tabs-title li.active-title{color:#333; font-size:18px!important; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); font-weight:bolder} .tabs-content li.active-content{display: block;} /*通用下拉选项卡样式*/ .dropdown{position: absolute; left: 30px; top: 30px; width: 320px;height: 200px; background: #FBFBFB;box-shadow: 0px 0px 15px 0px rgba(199, 64, 59, 0.2);border-radius: 5px; padding: 30px; box-sizing: border-box;} .dropdown .button{position:relative; border: none; outline: none; background:transparent; font-size: 24px; cursor: pointer;} .dropdown .button::before{position: absolute; content: "";display: block; border: 8px solid; border-color: #333 transparent transparent transparent; left: 130px; top: 10px;} .dropdown .button::after{position: absolute; content: "";display: block; border: 8px solid; border-color: #fbfbfb transparent transparent transparent; left: 130px; top: 8px;} .dropdown .divide-line{padding-top:20px;border-bottom: 1px solid #ccc;} .dropdown .dropdown-menu{position: absolute;font-size: 18px;border: 1px solid rgba(225,227,232,.48); background: #fff;box-shadow: 0 2px 2px 0 rgba(44,71,146,.17);cursor: pointer; z-index: 10; padding: 10px; display: none; top: 0px;} .dropdown .dropdown-menu li{margin-bottom: 15px; padding: 10px 20px;} .dropdown .dropdown-menu li:hover{background: #c7403b; color: #fff;} .dropdown .dropdown-content{margin-left: 34px;} .dropdown .dropdown-content li{display: none;} .dropdown .dropdown-content li:first-child{display: block;} .dropdown .dropdown-content li p{position: relative; font-size: 14px; color: #999; line-height: 24px;} .dropdown .dropdown-content li p:first-child{margin: 10px 0 11px;} .dropdown .dropdown-content li p::before{position: absolute; content: "";display: block; left: -30px; top: 4px; } .dropdown .dropdown-content li p:first-child::before{background: url("../images/about/phone.png");width: 15px; height: 14px;} .dropdown .dropdown-content li p:last-child::before{background: url("../images/about/address.png"); width: 15px; height: 18px;} .dropdown .button:hover #dropdown-menu{display: block;} /*首页样式*/ /* header */ .header{position:relative;z-index:10;} .header.header-hover{-webkit-transition:.8s;-o-transition:.8s;transition:.8s;} .header.header-hover .logo{background-position: -10px -10px;} .header.header-hover:hover{background: #fff!important;} .header.header-hover:hover .logo{background-position: -147px -10px;} .header.header-hover:hover #nav > li > a{color:#333;} .header-content{position: relative; width: 1200px; margin: 0 auto; height: 80px; line-height: 80px;} .header.header-infoArea{-webkit-box-shadow: 0px 1px 5px 0px rgba(51, 51, 51, 0.1);box-shadow: 0px 1px 5px 0px rgba(51, 51, 51, 0.1);} .header.header-infoArea #nav {height: 80px; line-height: 80px;} .header.header-infoArea .header-content{height: 80px; line-height: 80px;} .header.header-infoArea #nav > li > a{height:78px} /* logo */ .logo{float: left; width: 117px; height: 53px; margin-top: 10px; display: block;background: url("../images/logo1.png")no-repeat -147px -10px; } /* search */ .search-box{position: relative; text-align: right;width: 150px; float: right;} .search-box input{position: relative; display: inline-block; width: 150px; height: 25px; border-radius: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; border: 1px solid #eee; padding: 2px 25px 0px 10px; text-align: left; font-size: 10px;} .search-box .search-icon{position: absolute; top: 24px; right: 5px; background: url("../images/search.png") no-repeat center center; width: 14px; height: 14px;margin-top: 10px; margin-right: 5px; outline: none; border: none; } /* 菜单栏 */ /* 一级栏目 */ #nav{display: inline-block; list-style: none; height: 80px;line-height: 80px; -webkit-box-sizing: border-box; box-sizing: border-box;float:right;} #nav.to-right{float: right;} #nav > li {position: relative; float: left; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0px 31px; box-sizing: border-box; height: 80px; text-align: center; display:inline-block; overflow:hidden;} #nav > li:last-of-type {padding-right: 0px;} #nav > li > a{display: block; height:78px} #nav > li > .nav-line{width: 0px; height:2px; background:#c7403b; z-index: 1000; -webkit-transition:all ease-in-out .3s; -o-transition:all ease-in-out .3s; transition:all ease-in-out .3s; margin:0 auto;} #nav > li:hover{overflow:visible} #nav > li:hover .nav-line{width: 100%;} /* 二级栏目 */ #nav > li > ul{position: absolute; left: 0px; top: 80px; z-index:-1; display: inline-block; -webkit-transition: all linear 0.3s; -o-transition: all linear 0.3s; transition: all linear 0.3s; list-style: none; line-height: 40px; background-color: #fff; z-index: -10000;border: 1px solid #eee; padding: 10px 0px; opacity:0;-webkit-transform: translateY(-30px);-ms-transform: translateY(-30px);transform: translateY(-30px); } #nav > li:nth-of-type(1) > ul{left: -6px;} #nav > li:nth-of-type(2) > ul{left: -13px;} #nav > li:nth-of-type(3) > ul{left: 6px;} /* #nav > li:nth-of-type(4) > ul{left: 6px;} #nav > li:nth-of-type(5) > ul{left: 10px;} #nav > li:nth-of-type(6) > ul{left: 6px;} #nav > li:nth-of-type(7) > ul{left: 10px;} */ #nav > li:nth-of-type(8) > ul{left: 6px;} #nav > li:hover >.nav2{z-index: 100; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);opacity:1} #nav > li > ul >li {width: 110px; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box;margin: 0px; text-align: center; padding: 6px 0px; } #nav > li > ul >li >a{color: #999; display: block; height:28px;line-height:28px;} #nav > li:hover >a{color: #C7403B;} #nav > li > ul > li > a:hover{color: #C7403B;} /* 三级栏目 */ #nav .nav2.wide2{width: 1086px; height: 372px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 23px 44px!important; line-height:1} #nav .nav2.wide2 > li{float: left; width: 155px; margin-right: 45px; cursor: pointer; text-align: left; padding: 0px;} #nav .nav2.wide2 > li > a{line-height:16px; height: auto; border-bottom: 1px solid #DCDCDC; padding-bottom: 12px; margin-bottom: 20px;color: #333; } #nav .nav2.wide2 > li > a:hover{background: none; color: none;} #nav .nav2.wide2 > li:last-of-type{margin-right: 0px; width: 196px;} #nav .nav2.wide2 > li > ul > li{color: #999999; text-align: left;} #nav .nav2.wide2 > li > ul > li > a{color: #999; display: block;line-height: 28px; margin-bottom: 10px; padding-left:4px; -webkit-box-sizing: border-box; box-sizing: border-box;} #nav .nav2.wide2 > li > ul > li > a:hover {color: #C7403B; background: rgba(199, 64, 59, 0.1);} /*主体*/ #home .content{width: 100%; min-width: 1350px;} #home .area{width: 1200px; margin: 0 auto; text-align: center; overflow: hidden;} /* 轮播图 */ #home .banner { position: relative;height: 600px; overflow: hidden; min-width: 1350px;} #home .banner .arrow-left { background: url(../images/arrow.png) no-repeat left top;position: absolute;left: 100px;top: 275px; margin-top: -15px; width: 50px; height: 50px; z-index: 100;} #home .banner .arrow-right { background: url(../images/arrow-right.png) no-repeat left bottom; position: absolute; right: 100px; top: 275px; margin-top: -15px; width: 50px; height: 50px; z-index: 100;} #home .banner > .banner-points { position: absolute; left: 0;text-align: center; bottom: 30px; width: 100%;z-index: 100;} #home #swiper1 {height: 600px; width: 100%; cursor: auto!important;} #home #swiper1 .swiper-slide{position: relative; overflow: hidden;} #home #swiper1 .swiper-slide > img , #home #swiper1 .swiper-slide>a > img{position: absolute; top:0px;left: 50%;margin-left: -960px; height: 600px;} #home #swiper1 .swiper-slide > .content-slide {position: relative;width: 1200px; height: 600px; margin: 0 auto; color: #fff; overflow: hidden;} #home #swiper1 .swiper-slide > .slide01 { padding-top: 300px; box-sizing: border-box; display: flex; align-items: center; } #home #swiper1 .swiper-slide > .slide01 .use { transition: all .3s; width: 196px; height: 54px; line-height: 52px;text-align: center; color: #fff; font-weight: bold; font-size: 18px; margin-right: 28px; box-sizing: border-box; border: 1px solid #fff; background: transparent; border-radius: 10px; } #home #swiper1 .swiper-slide > .slide01 .use:hover { /* border-color: #fff; */ color: #0a56df; background-color: #fff; } #home #swiper1 .swiper-slide > .slide01 .watch { transition: all .3s; display: flex; align-items: center; font-weight: bold; font-size: 18px; color: #fff; } #home #swiper1 .swiper-slide > .slide01 .watch:hover { color: #c7403b; } #home #swiper1 .swiper-slide > .slide01 .watch img { margin-right: 8px; } /* #home #swiper1 .slide1 { display: none; } */ /* 内容区 */ /* 按钮 */ #home #swiper1 .content-slide .button{position: absolute;width: 194px; height: 52px;line-height: 52px; font-size: 18px;border-radius: 10px; border: 1px solid #fff; -webkit-transition:all ease-in-out .3s ; -o-transition:all ease-in-out .3s ; transition:all ease-in-out .3s ;text-align:center; color:#fff; z-index:10; } #home #swiper1 .content-slide .button.btn-left{left: 67px; bottom: 104px;} #home #swiper1 .content-slide .button.btn-center{left:50%; margin-left: -97px; bottom: 184px; } /* 按钮动效 */ #home #swiper1 .content-slide .btn-defaut:hover{background: #fff;color: #C7403B;} #home #swiper1 .content-slide .btn-blue:hover{background-color: #fff; color: #2989ff;} #home #swiper1 .content-slide .btn-deepBlue:hover{background-color: #fff; color: rgb(76, 79, 212);} #home #swiper1 .content-slide .btn-orange{border: 1px solid #ff891c; color: #ff891c;} #home #swiper1 .content-slide .btn-orange:hover{ background-color: #ff891c; color: #fff;} #home #swiper1 .content-slide .btn-lightBlue{border: 1px solid #4477c7; color: #4477c7;} #home #swiper1 .content-slide .btn-lightBlue:hover{ background-color: #4477c7; color: #fff;} #home #swiper1 .content-slide .btn1:hover{background-color: #c74038; color: #fff;cursor: pointer; border:1px solid transparent;} #home #swiper1 .content-slide .btn2:hover{background-color: #fff; color: rgb(76, 79, 212);cursor: pointer; } #home #swiper1 .content-slide .btn2 a:hover{background-color: #fff; color: rgb(76, 79, 212);cursor: pointer; } /* video按钮 */ #home #swiper1 .content-slide .video-link{position: absolute; left: 120px; bottom: 203px; background: url("../images/index-video-icon.png")no-repeat center center; color: #fff; float: left; height: 22px; padding-left: 190px; cursor: pointer; overflow:hidden;} /* 小圆点 */ #home .swiper-pagination-switch {display: inline-block;width: 8px; height: 8px; background: #fff; margin: 0 4px; cursor: pointer; -webkit-transition: all linear .2s; -o-transition: all linear .2s; transition: all linear .2s;} #home .swiper-active-switch { background: #fff; width: 24px; height: 8px; background-color: #C7403B;} /* 产品和解决方案 */ #home .container{width: 100%;} #home .content1{background: #f9f9f9; overflow: hidden; height: 890px;} #home .area1{position: relative;} #home .area1-content{text-align: center;} #home .area1-content .tabs-header{width:1200px; position: relative;} #home .area1-content .tabs-title li{margin: 0 71px;} #home .area1-left{position: relative; float: left; width: 540px; height: 100%;} #home .area1-left .tower{position: absolute; width: 188px; height: 166px;background: url("../images/left-tower.png")no-repeat center center; background-size: 100% 100%;} #home .area1-left .tower.left{left: -60px; top: 60px;} #home .area1-left .tower.right{right: 90px; top: 38px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);} #home .area1-left .tower.bottom{bottom: -95px; right: 43px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);} #home .area1-left img{opacity: 0;} #home .area1-left img.img-active{-webkit-animation: fadeIn ease-out .5s forwards;animation: fadeIn ease-out .5s forwards;} #home .area1-left .left2{top: 60px;} @-webkit-keyframes fadeIn{ from{ opacity: 0; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); } to{ opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } @keyframes fadeIn{ from{ opacity: 0; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); } to{ opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } #home .area1-right{float: right; width: 660px; height: 100%;} #home .area1-right ul{position: relative;-webkit-transition: all ease-out .3s;-o-transition: all ease-out .3s;transition: all ease-out .3s; height: 500px; opacity: 0;} #home .area1-right ul.ul-active{-webkit-animation: moveIn ease-out .5s forwards;animation: moveIn ease-out .5s forwards;} @-webkit-keyframes moveIn{ from{ left: -400px; opacity: 0; } to{ opacity: 1; left: 0px; } } @keyframes moveIn{ from{ left: -400px; opacity: 0; } to{ opacity: 1; left: 0px; } } #home .area1-right ul > li{float: left; padding: 17px 23px 16px 18px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 300px; height: 70px;text-align: left;margin: 0px 30px 30px 0; background: #fff; cursor: pointer; -webkit-transition: all .2s .0s ease; -o-transition: all .2s .0s ease; transition: all .2s .0s ease;} #home .area1-right ul > li span{float: left; width: 17px; height: 17px; margin: -3px 10px 10px 0; background: url("../images/icon5-block.png") no-repeat center center;} #home .area1-right ul > li h5{font-size: 16px; margin-bottom: 3px; text-align: left; font-weight: 400; margin-top: -5px;} #home .area1-right ul > li p{font-size: 14px; opacity: 0.7; text-align: left; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis;color:#666;} #home .area1-right ul > li:hover{ background: #C7403B; color: #fff;} #home .area1-right ul > li:hover h5{ color: #fff;} #home .area1-right ul > li:hover p{color: #fff;} #home .area1-right ul > li:hover span{background: url("../images/icon5.png") no-repeat center center;} /* 波浪 */ #home .wavy{position: relative; width: 100%;} #home .wavy img {position: absolute; bottom: 42px; left: 0px; width: 200%; height: 82px; animation:towavy linear 10s infinite alternate-reverse;} @-webkit-keyframes towavy{ from{ -webkit-transform: translateX(0%); transform: translateX(0%); } to{ -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes towavy{ from{ -webkit-transform: translateX(0%); transform: translateX(0%); } to{ -webkit-transform: translateX(-50%); transform: translateX(-50%); } } /* 核心数据 */ #home .content2{width: 100%; position: relative;background: url("../images/map-bg.png") no-repeat center center; background-size: 100% 100%; min-width: 1350px; } #home .area2{ height: 955px; } #home .area2-map{width: 809px; height: 689px; margin: -40px auto 0px;} #home .area2-list{width: 1200px; height: 120px; background: rgba(64, 117, 172, 0.3);-webkit-box-shadow: 0px 0px 5px 0px rgba(52, 52, 52, 0.2);box-shadow: 0px 0px 5px 0px rgba(52, 52, 52, 0.2); margin: 0 auto; margin-top: -30px;} #home .area2-list li{float: left; height: 110px; width: 300px; margin: 5px 0px; border-right: 1px solid rgba(255, 255, 255, 0.1); -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; padding: 22px 0px 32px 60px;} #home .area2-list li .area2-icon{float: left; margin-right: 25px; margin-top: 10px;} #home .area2-list li .area2-text{float: left;} #home .area2-text h3{font-size: 34px;font-weight: 400;font-style: italic; color:#fff; } #home .area2-text p{font-style: italic; color: rgba(255, 255, 255, 0.5);} /* 资讯动态 */ #home .content3{background: #fff;} #home .area3{height: 740px; overflow: visible;} #home .area3-content{position: relative;} #home .area3-list li{width: 370px!important; height: 330px;float: left; -webkit-transition: all linear 0.3s; -o-transition: all linear 0.3s; transition: all linear 0.3s; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); margin-top: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: 45px; cursor: pointer;} /* .area3-list li + li + li{margin-right: 0px;} */ #home .area3-list li .area3-img {position: relative; height: 200px; overflow: hidden;} #home .area3-list li .area3-img img{ width: 370px; height: 200px; } #home .area3-list li .area3-info{height: 130px;border: 1px solid #eee; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 17px 24px;} #home .area3-list li .area3-info h3{margin-bottom: 13px; font-size: 16px;} #home .area3-list li .area3-info p{font-size: 14px; color: #343434;opacity: 0.8 ;text-align: left;} #home .area3-list li .area3-img img.pos2{left: -90px; top: -97px;} #home .area3-list li .area3-img img.pos3{left: -72px; top: -61px;} #home .area3-list li:hover{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px); box-shadow: 0px 5px 5px 0px rgba(51, 51, 51, 0.1); box-shadow: 0px 5px 5px 0px rgba(51, 51, 51, 0.1);} #home .area3-more{width: 100px; height: 34px; line-height: 34px; color: #B5B5B5; margin: 0 auto; border-radius: 10px; border: 1px solid #B5B5B5; margin-bottom: 71px; display: block;} #home .area3-more:hover{background-color: #C7403B; color: #fff; border: 1px solid transparent; -webkit-transition: all .2s .0s ease; -o-transition: all .2s .0s ease; transition: all .2s .0s ease; cursor: pointer;} /* 轮播图 */ #home #swiper2{width: 1245px;margin-bottom: 30px; height: 350px; margin-left: -45px; overflow: hidden;} #home #swiper2 > .swiper-wrapper{height: 350px!important;} #home #swiper2 > .swiper-wrapper .swiper-slide{height: 330px!important;} #home .area3-content > .area3-arrow-l { background: url("../images/back.png") no-repeat left top;position: absolute;left: -79px;top: 150px; margin-top: -15px; width: 37px; height: 71px; z-index: 10;} #home .area3-content > .area3-arrow-r { background: url("../images/next.png") no-repeat left bottom; position: absolute; right: -79px; top: 150px; margin-top: -15px; width: 37px; height: 71px; z-index: 10;} /* 合作院校 */ #home .content4{background: #f9f9f9; } #home .area4-content{overflow: hidden; width: 1200px; height: 500px;} #home .area4 .swiper-container3{width: 1221px; height: 440px; margin-bottom: 30px;} #home .area4-list{width: 1200px!important; margin-right: 20px;} #home .area4-list li{width: 224px;height: 90px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 9px 9px 15px 4px;margin:0px 20px 20px 0px; float: left; background-color: #fff; overflow: hidden; } #home .area4-list li:nth-of-type(5n){margin:0px;} #home .area4-list li a {cursor: auto; display: block;} #home .area4-list li a img{border: none; position: absolute;left: 0px; top: 0px;} #home .area4-points{width: 61px; height: 8px; margin: 0 auto;} #home .area4-points span.swiper-pagination-switch{float: left; width: 8px; height: 8px;background: #5F6464;opacity: 0.1; margin-right: 3px;} #home .area4-points span.swiper-active-switch{width: 24px; height: 8px; background:#C7403B; opacity: 1;} /* 智课专题页 start */ .ar-title { width: 100%; display: flex; flex-direction: column; align-items: center; } .ar-title .title-cn { font-size: 30px; line-height: 30px; color: #000; margin: -10px; z-index: 3;} .ar-title .title-en { font-size: 34px; line-height: 34px; color: #eee; z-index: 2;} .clamp1{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .vid-con .vid-title { margin-bottom: 20px; font-size: 18px; line-height: 18px; display: flex; align-items: center; font-weight: bold; color: #2A63FF; } .vid-con .vid-title::before { content: ''; display: block; width: 30px; height: 6px; background: #2A63FF; margin-right: 8px; } .vid-con .vid-outer { display: flex; align-items: center; justify-content: space-between; } .vid-con .vid-outer .vid { width: 580px; height: 326px; position: relative; } .vid-con .vid-outer .vid video { border-radius: 10px; } .vid-con .vid-outer .vid .mask { transition: all ease-in-out .3s; position: absolute; top: 0px; left: 0px; width: 580px; opacity: 1; height: 326px; border-radius: 10px; background-color: rgba(0, 0, 0, .4) ; } .vid-con .vid-outer .vid .mask .play { transition: all ease-in-out .4s; cursor: pointer; position: absolute; top: 133px; left: 260px; opacity: 1; } .vid-con .vid-outer .vid .mask.active { background-color: transparent; opacity: 0; z-index: -1; } .vid-con .vid-outer .vid .mask.active .play { opacity: 0; } /* 头部 */ .product-b { width: 100%; height: 600px; background: #102f80 url('../images/index_new/product-banner.png') no-repeat 954px 140px ;} .head { width: 100%; height: 80px; background-color: transparent; transition: all ease-in-out .3s; } .head .head-nav { height: 80px; display: flex; align-items: center; justify-content: space-between; } .head .head-nav .logo { display: block; margin-top: -5px; width: 117px; height: 53px; background-image: url('../images/index_new/logo-change.png'); background-repeat: no-repeat; background-position:-10px -10px ; } .head .head-nav .nav-list { display: flex; align-items: center; height: 80px; line-height: 80px; box-sizing: border-box; } .head .head-nav .nav2 { display: none; } .head-nav .nav-list>li { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0px 23px; box-sizing: border-box; height: 80px; text-align: center; /* overflow: hidden; */ } .head-nav .nav-list>li>a { height: 78px; display: block; color: #fff; } .head-nav .nav-list>li .nav-line { width: 0px; height: 2px; background: #c7403b; z-index: 3; -webkit-transition: all ease-in-out .3s; -o-transition: all ease-in-out .3s; transition: all ease-in-out .3s; margin: 0 auto; } .nav-list > li.active .nav-list-line { width: 100%; } .nav-list > li > ul { position: absolute; z-index: -1; left: 0px; top: 60px; display: inline-block; transition: all .3s; list-style: none; line-height: 40px; background-color: #fff; border: 1px solid #eee; padding: 10px 0px; opacity: 0; } .nav-list > li > ul >li {width: 110px;text-align: left;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0px;text-align: center;padding: 6px 0px;} .nav-list > li > ul >li >a { color: #999; display: block; height: 28px; line-height: 28px;} .nav-list > li > ul > li > a:hover { color: #C7403B; } .nav-list .nav2.wide2 { width: 1086px; height: 372px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 23px 44px!important; line-height: 1;} .nav-list > li:hover >ul { z-index: 9; top: 80px; opacity: 1;} .nav-list > li:hover .nav-line { width: 100%; } .head:hover { background-color: #fff; } .head:hover .logo { background-position: -147px -10px; } .head:hover .nav-list > li > a { color: #333; } .product-b .header-content { margin-top: 0; } .product-b .header { margin-bottom: 120px; } /* .product-b .header { margin-bottom: 120px; } .product-b .header:hover { background-color: #fff; } */ .product-b .header-content .content-text { width: 624px; } .product-b .header-content h1 { font-size: 48px; color: #FFFFFF; line-height: 48px; margin-bottom: 40px; } .product-b .header-content p { font-size: 18px; color: #FFFFFF; line-height: 30px; margin-bottom: 70px; } .product-b .header-content .click-text { display: flex; align-items: center; } .product-b .header-content .click-text .use { transition: all .3s; width: 180px; height: 50px; line-height: 46px;text-align: center; color: #102F80; font-weight: bold; font-size: 18px; margin-right: 28px; box-sizing: border-box; border: 2px solid transparent; background: #FFFFFF; border-radius: 25px; } .product-b .header-content .click-text .use:hover { border-color: #fff; color: #fff; background-color: #117afd; } .product-b .header-content .click-text .watch { transition: all .3s; display: flex; align-items: center; font-weight: bold; font-size: 18px; color: #fff; } .product-b .header-content .click-text .watch:hover { color: #117afd; } .product-b .header-content .click-text .watch img { margin-right: 8px; } /* product-ar1 */ .product-ar1 { padding-top: 80px; margin-bottom: 120px; } .product-ar1 .ar-title { margin-bottom: 175px; } .product-ar1 .ar-content { width: 100%; height: 360px; margin-bottom: 60px; position: relative; background: url('../images/index_new/ar1.jpg') no-repeat center center; } .product-ar1 .position-area { width: 500px; height: 446px; position: absolute;left: 50px; bottom: 40px; background: #FFFFFF; box-shadow: 0px 10px 15px 0px rgba(0,20,73,0.15); border-radius: 14px; overflow: hidden; } .product-ar1 .position-area .ar-top { height: 50px; background-color: #F8F9FC; display: flex; align-items: center; } .product-ar1 .position-area .ar-top .line { width: 30px; height: 6px; background: #2B67FF; margin-left: 24px; } .product-ar1 .ar-bottom li { width: 100%; height: 99px; border-bottom: 1px solid #EEEEEE; padding-left: 20px; padding-top: 24px; box-sizing: border-box; } .product-ar1 .ar-bottom li:last-child { border-bottom: none; } .product-ar1 .ar-bottom li h3 { font-size: 18px; color: #111111; line-height: 18px; margin-bottom: 16px; } .product-ar1 .ar-bottom li p { font-size: 16px; color: #333333; line-height: 16px; } /* product-ar2 */ .product-ar2 { margin-bottom: 98px; } .product-ar2 .ar-title { margin-bottom: 44px; } .product-ar2 .line { position: absolute; z-index: 1; top: 34px; left: 0; width: 100%; height: 1px; background:linear-gradient(to right,transparent 0% ,#E5E5E5 50% , transparent 100%); } .product-ar2 .tab-con { position: relative; margin-bottom: 60px; } .product-ar2 .tab-con .tab-list { display: flex; position: relative; z-index: 2; align-items: center; justify-content: space-between;} .product-ar2 .tab-con .tab { display: flex; flex-direction: column; align-items: center; } .product-ar2 .tab-con .tab h4 { color: #000; font-size: 18px; line-height: 18px; } .product-ar2 .vid-con { position: relative; } .product-ar2 .vid-con .vid p { color: #666; font-size: 14px; margin-top: 18px; text-align: center; margin-bottom: 48px; } .product-ar2 .vid-con .vid-outer { position: relative; z-index: 2; } .product-ar2 .vid-con .vid-bg { width: 100%; height: 260px; z-index: 1; background: #F1F1F1; position: absolute; left: 0; bottom: 0; } .product-ar2 .vid-con .vid-outer .vid { height: auto; } /* product-ar3 */ .product-ar3 { margin-bottom: 60px; } .product-ar3 .ar-title { margin-bottom: 48px; } .product-ar3 .ar3-bg { width: 100%; height: 400px; margin-bottom: 60px; position: relative; overflow: hidden; background: url('../images/index_new/ar3-bg.png') no-repeat; } .product-ar3 .ar3-bg li { position: absolute; height: 88px; box-sizing: border-box; padding: 0 18px 0 20px; display: flex; align-items: center; background-color: #FFFFFF; background-repeat: no-repeat; background-position: right bottom; box-shadow: 0px 12px 0px 0px rgba(78,35,217,0.1); border-radius: 10px; } .product-ar3 .ar3-bg li .right-icon { width: 24px; height: 24px; margin-right: 14px; } .product-ar3 .ar3-bg li p { flex: 1; font-size: 16px; font-weight: bold; line-height: 16px; color: #152548; } .product-ar3 .ar3-bg li.li01 { width: 400px; top: 47px; left: 100px; background-image: url('../images/index_new/ar3-list01.png'); } .product-ar3 .ar3-bg li.li02 { width: 430px; top: 134px; right: 129px; background-image: url('../images/index_new/ar3-list02.png');} .product-ar3 .ar3-bg li.li03 { width: 380px; bottom: 56px; left: 250px; background-image: url('../images/index_new/ar3-list03.png'); } .animate__delay_half { -webkit-animation-delay:0.5s; } .product-ar3 .try-btn { width: 220px; height: 80px; margin: 0 auto; background-color:rgba(42, 99, 255, .1); border-radius: 40px; position: relative; } .product-ar3 .try-btn a { display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; position: absolute; top: 10px; left: 10px; width: 200px; height: 60px; background: #2A63FF; border-radius: 30px; } .product-ar3 .click-ani { position: absolute; width: 80px; right: -42px; bottom: -60px; } /* 视频弹窗 */ .vid_pop { transition: all .3s; opacity: 0; width: 100%; height: 100%; z-index: -2; background-color: rgba(0, 0, 0, .5); position: fixed; top: 0; left: 0; } .vid_pop .vid_content { position: absolute; top: 20%; left: 50%; border-radius: 10px; overflow: hidden; transform: translateX(-50%); } .vid_pop .vid_content video{ width: 100%; display: block; } .vid_pop .close-btn { width: 40px; height: 40px; cursor: pointer; position: absolute;right: 25%; top: 12%; background: url('../images/video-close-btn.png') no-repeat; background-size: 100% 100%; } .vid_pop.show { transition: all .3s; z-index: 999;opacity: 1; } /* 智课专题页 end */ /*底部*/ /* 联系我们 */ .content5{background: #0E0E1B; color: #fff; width: 100%; min-width: 1350px; } .area5{width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 360px;} .foot{padding-top: 50px; margin-bottom: 30px; text-align:left} .foot > li{float: left; margin-right: 35px; } .foot > li a{cursor: pointer; color: #B4B4B4;} .foot > li + li + li +li {margin-right: 0px; } .foot > li h3{margin-bottom: 27px; text-align: left; color: #fff;font-size:16px;font-weight: 400;} .foot > li p{color: #B4B4B4; text-align: left; margin-bottom: 10px;font-size: 14px;} .foot > li > ul{float: left; margin-right: 30px; color: #B4B4B4;} .foot > li > ul li{margin-bottom: 15px; text-align: left; font-size: 14px;} .foot > li > ul li > a:hover{color: #989898;} /* 关注我们 */ .foot >.foot_care{float: right;} .foot >.foot_care ul {margin-right: 0px;} .foot >.foot_care ul > li{float: left; margin-right: 30px;} .foot >.foot_care ul > li p{text-align: center; margin-top: 14px;} .foot >.foot_care ul > li:last-child { margin-right: 0px; } .foot >.foot_care ul > li.link5-3 img { width: 115px; } /* 友情链接 */ .foot_link {color: #B4B4B4; cursor: pointer;} .foot_link h3{float: left; margin-right: 40px; font-size: 16px; font-weight: 500; color: #B4B4B4;} .foot_link ul li{float: left; margin-right: 30px;} .foot_link a{cursor: pointer; color: #B4B4B4;} .foot_link a:hover{cursor: pointer; color: #989898;} /* 底部-备案信息 */ .footer-bottom{min-width:1350px; height: 60px; line-height: 60px; background-color:#1C1C30; text-align: center; font-size: 14px; } .footer span{margin-right: 60px; color: #b4b4b4;} .footer-bottom span{ color:#fff;} .footer-bottom a{color:#fff;} .footer-bottom a:hover{text-decoration: underline;} /* 案例首页 */ #case{background-color: #FBFBFB; min-width:1350px;} #case .ny-banner{position: relative; width: 100%; height: 300px; min-width: 1350px; overflow:hidden} #case .ny-banner .ny-banner-img{position: absolute;top: 0px; left: 50%; margin-left: -960px; height: 100%;} #case .ny-banner-title{position: relative; width: 1200px; margin: 0 auto; height: 300px;} #case .ny-banner-title .ny-banner-info{position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: auto; display:inline-block; height: 70px; text-align: center;} #case .ny-banner-title .ny-banner-info h1{font-size: 36px; color: #fff; font-weight: 300;} #case .ny-banner-title .ny-banner-info p{font-size: 20px; color: #fff; } #case .ny-banner-title img{position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: auto;} #case .tabs2{min-width: 1350px; margin: 0 auto; text-align: center; line-height:1;} #case .tabs2 .tabs2-header{margin-left: 100px;} #case .tabs2 .tab-title2{margin-right: 105px; padding-bottom:0px;} #case .tabs2 .tab-title2 a{color:#666}; #case .tabs2 .tab-title2:nth-of-type(1){margin-right: 88px;} #case .tabs2 .tab-title2.active-title{color:#c74038;border-bottom:2px solid #c74038;height:60px;} #case .tabs2 .tab-title2.active-title a{color:#c74038;} #case .tabs2 .tabs-content{padding-top:0px; height:auto;} #case .tabs2 .tabs-content .tab-box{height:auto} #case .tabs2 .list{ list-style: none; width: 1200px; margin: 0 auto; background:#fbfbfb; padding-top:60px ;} #case .tabs2 .list > li{float: left;} #case .tabs2 .list > li:nth-of-type(3n) > .graphic-box{ margin-right: 0px;} #case .tabs2 .graphic-box{display: inline-block; margin: 0px 24px 24px 0px; -webkit-transition: all linear .2s; -o-transition: all linear .2s; transition: all linear .2s; cursor: pointer; } #case .tabs2 .graphic-box > img{display: block; width: 384px; height: 230px; background-repeat: no-repeat; background: center center;} #case .tabs2 .graphic-img{width: 384px; height: 230px; background-repeat: no-repeat; background-position: center center;} #case .tabs2 .graphic-info{height: 136px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 18px 20px 17px 20px; color: #fff; text-align: left;} #case .tabs2 .graphic-info > h3{margin-bottom: 18px; line-height: 18px; font-size: 18px; font-weight: 400; color: #333; } #case .tabs2 .graphic-info > p{line-height: 16px; font-weight: 400; color: #999; margin-bottom: 20px;} /* #case .tabs2 .graphic-info > .to-next{background: url("../images/case/arrow-Enter.png") no-repeat center center; width: 55px; height: 20px; float: right; opacity: 0; -webkit-transition: all linear .2s; -o-transition: all linear .2s; transition: all linear .2s;} */ #case .tabs2 .graphic-info .info_details{border-top: 1px dashed #999;font-size: 14px; color: #999; opacity:0.5} #case .tabs2 .graphic-info .info_details .school{float: left; padding-top: 15px;} #case .tabs2 .graphic-info .info_details .school::before{content: ""; display: inline-block; width: 16px; height: 14px; background: url("../images/case/cap.png")no-repeat center center; margin-right: 10px; vertical-align: top;} #case .tabs2 .graphic-info .info_details .num_count{float: right; padding-top: 15px;} #case .tabs2 .graphic-info .info_details .num_count span{vertical-align:middle;} #case .tabs2 .graphic-info .info_details .num_count::before{content: ""; display: inline-block; width: 21px; height: 13px; background: url("../images/case/eyes.png")no-repeat center center; margin-right: 10px; vertical-align: middle;} #case .tabs2 .graphic-box:hover{-webkit-box-shadow: 0px 0px 10px 0px rgba(199, 64, 59, 0.3);box-shadow: 0px 0px 10px 0px rgba(199, 64, 59, 0.3); -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px);} #case .tabs2 .graphic-box:hover .graphic-info > h3{color: #C8403C;} #case .tabs2 .graphic-box:hover .graphic-info > .to-next{opacity: 1;} /* 图片区 */ #case .tabs2 .graphic-img.pic1{background: url("../images/case/case1.png")} #case .tabs2 .graphic-img.pic2{background: url("../images/case/case2.png")} #case .tabs2 .graphic-img.pic3{background: url("../images/case/case3.png")} #case .tabs2 .graphic-img.pic4{background: url("../images/case/case4.png")} #case .tabs2 .graphic-img.pic5{background: url("../images/case/case5.png")} #case .tabs2 .graphic-img.pic6{background: url("../images/case/case6.png")} #case .tabs2 .graphic-img.pic7{background: url("../images/case/case7.png")} #case .tabs2 .graphic-img.pic8{background: url("../images/case/case8.png")} #case .tabs2 .graphic-img.pic9{background: url("../images/case/case9.png")} /* 案例首页end */ /* 案例-服务 */ .case-service .service-container{width: 1200px; margin: 0 auto; text-align: center; padding-bottom:100px} .case-service .service-container .service-title{display: inline-block; text-align: center; margin: 80px auto 50px auto;} .case-service .service-container .service-title > h1{margin-bottom: 10px;} .case-service .service-container .service-title .info{display: inline-block; text-align: center; font-size: 14px; color: #999; margin-bottom: 20px;} .case-service .service-container .service-title .info .count{float: left; margin-right: 30px;} .case-service .service-container .service-title .info .school{float: right;} .case-service .service-container .service-title .info .count::before{content: ""; display: inline-block; width: 21px; height: 13px; background: url("../images/case/eyes.png")no-repeat center center; margin-right: 10px; vertical-align: middle;} .case-service .service-container .service-title .info .school::before{content: ""; display: inline-block; width: 16px; height: 14px; background: url("../images/case/cap.png")no-repeat center center; margin-right: 10px; vertical-align: middle;} .case-service .service-container .service-title > .line{width: 30px; height: 5px; background-color: #C8403C; margin: 0 auto; -webkit-transition: width linear 0.2s; -o-transition: width linear 0.2s; transition: width linear 0.2s; border-radius: 10px; } /* .case-service .service-container .service-title:hover >.line{width: 100%;}*/ .case-service .service-container .service-wrapper{position: relative; } .case-service .service-container .service-content{position: relative; width: 1100px; height: 524px;border-top:1px dashed rgba(153,153,153,0.3); margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .case-service .service-arrow{position: absolute; top: 50%; margin-top: -20.5px; width: 18px; height: 41px; cursor: pointer; z-index: 100;} .case-service .allow-prev{background: url("../images/case/case-suke/arrow-prev.png") no-repeat -9px -9px; left: 0px; font-size:0px} .case-service .allow-next{background: url("../images/case/case-suke/arrow-next.png") no-repeat -9px -9px; right: 0px; font-size:0px} .case-service .allow-prev.prevPos{background-position: -48px -9px;} .case-service .allow-next.nextPos{background-position: -48px -9px;} .case-service .allow-prev > a{display:inline-block; width:100%;height:100%} .case-service .allow-next > a{display:inline-block; width:100%;height:100%} .case-service .service-content .service-info{position: relative; width: 886px !important; padding: 47px 107px ;} .case-service .service-content .service-info > .phone{width: 220px; height: 430px; float: left; -webkit-box-sizing: border-box; box-sizing: border-box;border-radius: 30px; -webkit-box-shadow: 0px 0px 10px 0px rgba(200, 64, 60, 0.3); box-shadow: 0px 0px 10px 0px rgba(200, 64, 60, 0.3); margin-right: 46px;} .case-service .service-content .service-info > .phone > img{width: 220px; height: 430px; } .case-service .service-content .service-info > .patent{float: right; -webkit-box-shadow: 0px 0px 10px 0px rgba(200, 64, 60, 0.3); box-shadow: 0px 0px 10px 0px rgba(200, 64, 60, 0.3);border-radius: 5px; margin-left: 46px;} .case-service .service-content .service-info > .patent > img{width: 310px; height: 430px; } .case-service .service-content .service-info > .phone-patent-box{width: 262px; height: 136px; border: 1px solid #eee; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px;} .case-service .service-content .service-info > .phone-patent-box > h3{font-size: 16px; margin-bottom: 18px; font-weight: 400; line-height: 15px; position: relative;} .case-service .service-content .service-info > .phone-patent-box > p{font-size: 14px; color: #9a9a9a; line-height: 22px; position: relative; white-space:pre;} .case-service .service-content .service-info > .phone-info{float: left; margin-top: 30px; } .case-service .service-content .service-info > .phone-info > h3::before{content:""; display: inline-block; width: 0; border: 10px solid transparent; border-right-color: #C8403C; position: absolute; left: -60px; top: 45px;} .case-service .service-content .service-info > .patent-info{float: right; margin-top: 65px;} .case-service .service-content .service-info > .patent-info > h3::after{content:""; display: inline-block; width: 0; border: 10px solid transparent; border-left-color: #C8403C; position: absolute; right: -60px; top: 45px;} /* 案例-服务end */ /* 案例-速课 */ .case-suke .suke-container{width: 1200px; margin: 0 auto; text-align: center; padding-bottom:100px;} .case-suke .suke-container .suke-title{display: inline-block; text-align: center; margin: 80px auto 50px auto; line-height:1} .case-suke .suke-container .suke-title > h1{margin-bottom: 20px; position: relative;} /* .case-suke .suke-container .suke-title > h1::after{content: "";display: inline-block;width: 30px; height: 5px; background-color: #C8403C; -webkit-transition: width linear 0.2s; -o-transition: width linear 0.2s; transition: width linear 0.2s; border-radius: 10px; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);} */ .case-suke .suke-container .suke-title .info{display: inline-block; text-align: center; font-size: 14px; color: #999; margin-bottom: 20px;} .case-suke .suke-container .suke-title .info .count{float: left; margin-right: 30px;} .case-suke .suke-container .suke-title .info .count span{vertical-align:middle;} .case-suke .suke-container .suke-title .info .school{float: right;} .case-suke .suke-container .suke-title .info .school span{vertical-align:middle;} .case-suke .suke-container .suke-title .info .count::before{content: ""; display: inline-block; width: 21px; height: 13px; background: url("../images/case/eyes.png")no-repeat center center; margin-right: 10px; vertical-align: middle;} .case-suke .suke-container .suke-title .info .school::before{content: ""; display: inline-block; width: 16px; height: 14px; background: url("../images/case/cap.png")no-repeat center center; margin-right: 10px; vertical-align: middle;} .case-suke .suke-container .suke-title > .line{width: 30px; height: 5px; background-color: #C8403C; margin: 0 auto; -webkit-transition: width linear 0.2s; -o-transition: width linear 0.2s; transition: width linear 0.2s; border-radius: 10px; } /* .case-suke .suke-container .suke-title:hover .line{width: 100%;} */ .case-suke .suke-container .suke-wrapper{position: relative; } .case-suke .suke-container .suke-content{position: relative; width: 1100px; height: 524px; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px dashed rgba(153, 153, 153, 0.3);} .case-suke .suke-arrow{position: absolute; top: 50%; margin-top: -20.5px; width: 18px; height: 41px; cursor: pointer; z-index: 100;} .case-suke .allow-prev{background: url("../images/case/case-suke/arrow-prev.png") no-repeat -9px -9px; left: 0px;font-size:0;} .case-suke .allow-next{background: url("../images/case/case-suke/arrow-next.png") no-repeat -9px -9px; right: 0px;font-size:0;} .case-suke .allow-prev.prevPos{background-position: -48px -9px;} .case-suke .allow-next.nextPos{background-position: -48px -9px;} .case-suke .suke-content .suke-info{position: relative; width: 923px !important; padding: 47px 107px 47px 70px;} .case-suke .suke-content .suke-info > .phone{width: 220px; height: 430px; float: left; margin-right: 59px; -webkit-box-shadow: 0px 0px 10px 0px rgba(199, 64, 59, 0.3); box-shadow: 0px 0px 10px 0px rgba(199, 64, 59, 0.3); border-radius: 30px;} .case-suke .suke-content .suke-info > .phone img{width:100%; height: 100%;} .case-suke .suke-content .suke-info > .phone-info{float: left; margin-top: 136px; position: relative; margin: 140px 97px 0px 0px;} .case-suke .suke-content .suke-info > .phone-info > img{margin-bottom: 17px;width: 140px;} .case-suke .suke-content .suke-info > .phone-info > p{font-size: 14px; color: #9a9a9a;} .case-suke .suke-content .suke-info > .phone-info > p::before{content:""; display: inline-block; width: 0; border: 10px solid transparent; border-right-color: #C8403C; position: absolute; left: -35px; top: 60px;} .case-suke .suke-info >.suke-detail{ float: right; text-align: left;margin-top: 60px;} .case-suke .suke-info >.suke-detail > .suke-top{ width: 368px; margin-bottom: 85px;} .case-suke .suke-info >.suke-detail > .suke-top > h3{font-size: 24px; font-weight: bold; margin-bottom: 20px; float: left;} .case-suke .suke-info .suke-detail .suke-top .suke-tag{display: inline-block;width: 58px;height: 18px;border: 1px solid #C7403B; background-color: #fff;font-size: 12px;line-height: 18px;text-align: center; color: #C7403B;font-weight: 200; margin: 0 0 0px 15px;vertical-align: middle;} .case-suke .suke-info >.suke-detail > .suke-top > p{font-weight: 400; float: left; margin-bottom: 30px;width:100% } .case-suke .suke-info >.suke-detail > .suke-top > p > span{font-weight: 400; float: left; margin-bottom: 30px; } .case-suke .suke-info >.suke-detail > .suke-top > .suke-line{background-color: #C7403B;height: 1px; width: 160px;margin: 0; } .case-suke .suke-info >.suke-detail > .suke-middle{color: #9a9a9a; font-size: 14px; margin-bottom: 48px;} .case-suke .suke-info >.suke-detail > .suke-middle > p{line-height: 24px; white-space:pre;} .case-suke .suke-info >.suke-detail > .suke-middle > p a{color: #9a9a9a;} .case-suke .suke-info >.suke-detail > .suke-make-btn{-webkit-transition: .3s;-o-transition: .3s;transition: .3s; display: block;width: 120px;height: 30px;-webkit-box-sizing: border-box;box-sizing: border-box;border: 1px solid #C7403B;border-radius: 15px;font-size: 16px;line-height: 28px;text-align: center;color: #C7403B;} .case-suke .suke-info >.suke-detail > .suke-make-btn:hover{background-color: #C7403B; color: #FFF;} .case-suke .suke-info >.suke-evaluate{position: absolute;right: 15px; top: 15px; background: url("../images/case/case-suke/good.png")no-repeat center center; width: 67px; height: 82px;} .case-suke .suke-arrow a{font-size: 0;width: 100%;height:100%;display: block;} .case .tabs-title li.active-title >a{display: inline-block; line-height: 60px;} /* 案例-速课end */ /* about */ /* about页通用标题 */ .about .title{display: inline-block; text-align: center; margin: 29px 0px 0px; max-width: 104px; } .about .title > h1{margin-bottom: 10px; font-size: 26px; font-weight: 400;} .about .title > .line{width: 30px; height: 2px; background-color: #C7403B; -webkit-transition: width linear 0.2s; -o-transition: width linear 0.2s; transition: width linear 0.2s; border-radius: 10px;} .about .title > p{white-space: nowrap;} .about .title:hover >.line{width: 100%;} .about .title.title2{margin: 0 auto; display: block; padding-top: 67px;} .about .title.title2 .line{margin: 0 auto 30px; } .about .dev-title > .sub-head{font-size: 20px; font-style: italic; color: #999; line-height: 20px;margin: 0 auto 51px; text-align: center;} /* about */ #about {font-size:16px} #about .ny-banner{position: relative; width: 100%; height: 300px; min-width: 1350px; overflow: hidden;} #about .ny-banner .ny-banner-img{position: absolute;top: 0px; left: 50%; margin-left: -960px; height: 100%;} #about .ny-banner-title{position: relative; width: 1200px; margin: 0 auto; height: 300px;} #about .ny-banner-title .ny-banner-info{position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: auto; display: inline-block; height: 70px; text-align: center;} #about .ny-banner-title .ny-banner-info h1{font-size: 36px; color: #fff; font-weight: 300;} #about .ny-banner-title .ny-banner-info p{font-size: 20px; color: #fff;font-weight: 200; } #about .ny-banner-title img{position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: auto;} .about .anchor-area{background: #FBFBFB; width:100%} .about .anchor-list{width: 1200px; margin: 0px auto; height: 50px ;} .about .anchor-list li{float: left; line-height: 48px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 30px; } .about .anchor-list li.active-anchor{border-bottom: 2px solid #C8403C;} #about .about-company{width: 1200px; margin: 80px auto 52px; line-height: 1;} #about .company-top{height: 308px; margin-bottom: 20px;} #about .company-bottom{background: url("../images/about/company-bg.png")no-repeat center center; height: 325px; padding: 30px 40px; box-sizing: border-box; color: #fff;} #about .company-top .part1-left{width: 580px; margin-right: 40px;float: left; position: relative;} #about .company-top .part1-left h3{font-size: 32px; font-weight: bold; font-style: italic; padding-top: 49px; line-height: 1; margin-bottom: 41px;} #about .company-top .part1-left::before{content: ""; display: inline-block;background: url("../images/about/company-text.png")no-repeat center center; position: absolute;left: -118px; top: 24px; z-index: 5; width: 518px; height: 75px;} #about .company-top .part1-left p{line-height: 32px; color: #999;} #about .company-top .part1-right{width: 580px; float: left;} #about .company-top .part1-right li{width: 290px; height: 154px; float: left; box-sizing: border-box;} #about .company-top .part1-right li .hover-area{width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; padding: 20px;cursor: pointer;transition: background ease-in-out .3s; } #about .company-top .part1-right li a{color: #333; cursor: pointer;} #about .company-top .part1-right li .line{width: 60px; height: 3px; background: #C7403B; margin-top: 10px; margin-bottom: 30px;} #about .company-top .part1-right li h3{margin-bottom: 9px; font-size: 18px;font-style: italic; transition: all ease-in-out .3s;} #about .company-top .part1-right li p{font-weight: bold; font-size: 18px; transition: all ease-in-out .3s;} #about .company-top .part1-right li span{display: inline-block; margin-top: 100px;transition: all ease-in-out .3s;line-height: 26px;} #about .company-top .part1-right li:first-child{border-right: 1px dotted #eee; border-bottom: 1px dotted #eee;} #about .company-top .part1-right li:last-child{border-left: 1px dotted #eee; border-top: 1px dotted #eee;} /* 动效 */ #about .company-top .part1-right li:hover .hover-area{background: #C7403B; color: #fff; background-image: url("../images/about/course_text.png"); background-repeat: no-repeat; background-position: right bottom;} #about .company-top .part1-right li:hover a{color: #fff;} #about .company-top .part1-right li:hover h3{margin-top: -30px;} #about .company-top .part1-right li:hover p{margin-left: -300px;} #about .company-top .part1-right li:hover span{margin-top: -14px;} #about .company-bottom .part2-left{width: 550px; float: left; border-right: 1px solid #fff; height: 100%;} #about .company-bottom .part2-left h3{font-size: 24px; margin-bottom: 22px; line-height: 1;} #about .company-bottom .part2-left p{line-height: 32px; width: 500px;} #about .company-bottom .part2-right{width: 550px; float: left;} #about .company-bottom .part2-right ul{margin-left: 50px; margin-top: 8px;} #about .company-bottom .part2-right li{margin-bottom: 18px;list-style: circle; line-height: 1;} #about .company-bottom .part2-right li:last-child{margin-bottom: 0px;} .about .dev-history{width: 100%; height: 498px; background: url("../images/about/devHis-bg.png") no-repeat left top; min-width: 1350px;} .about .company-bottom .grade-list .scale-item > .hover-area{width: 282px; height: 238px; background: #C7403B;border-radius: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px 16px 16px; color: #fff; line-height: 26px;position: absolute; top: 40px; opacity: 0; -webkit-transition: all ease .6s; -o-transition: all ease .6s; transition: all ease .6s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-box-shadow: 0px 0px 30px 0px rgba(199, 64, 59, 0.7); box-shadow: 0px 0px 30px 0px rgba(199, 64, 59, 0.7); } .about .company-bottom .grade-list .scale-item > .hover-area.pos1{left: 5px;} .about .company-bottom .grade-list .scale-item > .hover-area.pos2{left: 305px;} .about .company-bottom .grade-list .scale-item > .hover-area.pos3{left: 605px;} .about .company-bottom .grade-list .scale-item > .hover-area.pos4{left: 905px;} .about .company-bottom .grade-list .scale-item:hover > h3{opacity: 0;} .about .company-bottom .grade-list .scale-item:hover > p{opacity: 0;} .about .company-bottom .grade-list .scale-item:hover .hover-area{opacity: 1; -webkit-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); } .about .dev-history .dev-content {} .about .dev-history .dev-content {} .about .dev-content .tabs3-header{display: block; margin: 0 auto; width: 1136px; top:10px;} .about .dev-content .tabs3-header .tabs3-title{} .about .dev-content .tabs3-header .tabs3-title > .tab3-title{position: relative; margin-right: 24px; font-size: 14px;width: 65px;color: #7f7f8b;} .about .dev-content .tabs3-header .tabs3-title > .tab3-title:last-of-type{margin-right: 0px;} .about .dev-content .tabs3-header .tabs3-title > .tab3-title::after{ content:""; position: absolute; width: 5px; height: 5px; border: 5px solid #F3F4F7; border-radius: 50%;background: #9596A7; left: 50%; bottom: -6px; margin-left: -8px;} .about .dev-content .tabs3-header .tabs3-title > .tab3-title.active-title::after{background: #C8403C; width: 7px; height: 7px;border-width: 6px;bottom: -8px;border-color:#fff;} .about .dev-content .tabs3-content{border-top: 1px solid #ccc; height: 190px; overflow: hidden;} .about .dev-content .tabs3-content .tab3-box{width: 1200px; height:auto; margin: 0 auto;} .about .dev-content .tabs3-content .tab3-box > h3{font-weight: 400; line-height: 18px; margin-bottom: 20px; font-size: 18px;} .about .dev-content .tabs3-content .tab3-box > ul{} .about .dev-content .tabs3-content .tab3-box > ul li{position: relative; min-width: 250px; max-width: 400px; height: 100px; opacity: 0.8; border-radius: 10px; color: #999; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 18px 31px 18px 37px; float: left; margin-right: 66px; font-size: 14px;box-shadow: 0 0 20px rgba(0, 0, 0, .2);} .about .dev-content .tabs3-content .tab3-box > ul li:nth-of-type(4n){margin-right: 0px;} .about .dev-content .tabs3-content .tab3-box > ul li::before{ content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; left: 18px; top: 25px; background:#C7403B ;} /* 动效 */ /* .about .dev-content .tabs3-content .tab3-box.active-content .dev-item{margin-left: 30px;} */ .about .join-us{height: 750px; position: relative; min-width: 1350px; overflow: hidden;} .about .join-us .join-img{position: relative; width: 910px; height: 750px; background: url("../images/about/join-img.png")no-repeat center center; overflow: hidden; float: left; margin-right: 30px;} .about .join-us .join-img .layer-mask{position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: auto; background-color: rgba(4, 18, 48, 0.7); line-height: 60px;} .about .join-us .join-img .layer-mask .layer-text{position: absolute;top: 213px; right: 165px; width: 385px;} .about .join-us .join-img .layer-mask .layer-text p{font-style: italic; font-size: 24px; color: #fff; font-weight: 300;opacity: .8;} .about .join-us .join-content{display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 52px 0px 76px 0px; position: absolute; left: 940px; top: 0px;} .about .join-us .join-content .jobs-area{margin-top:30px;} .about .join-us .join-content .jobs-area .swiper-container{width: 650px; height: 490px;} .about .join-us .join-content .join-list{width: 640px;height: 490px; float: left;} .about .join-us .join-content .join-list .join-item{float: left; cursor: pointer; margin: 0px 20px 20px 0px;} .about .join-us .join-content .join-list .join-item .hover-area{position: relative;padding: 30px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 300px; height: 140px; border: 1px solid #eee; border-radius: 7px; -webkit-transition: all ease-in-out .3s!important; -o-transition: all ease-in-out .3s!important; transition: all ease-in-out .3s!important; } .about .join-us .join-content .join-list .join-item .hover-area> h3{font-style: 18px;line-height: 18px; margin-bottom: 14px; -webkit-transition: all linear .2s !important; -o-transition: all linear .2s !important; transition: all linear .2s !important;} .about .join-us .join-content .join-list .join-item .hover-area> p{color: #999; font-size: 14px; line-height: 24px;-webkit-transition: all linear .2s !important;-o-transition: all linear .2s !important;transition: all linear .2s !important;} .about .join-us .join-content .join-list .join-item .hover-area> .join-next{position: absolute; background: url("../images/about/about_sprites.png")no-repeat -132px -10px; width: 37px; height: 11px; right: 28px; transition: all ease-in-out .3s;} .about .join-us .join-content .join-list .join-item .hover-area:hover{background: #C8403C; color: #fff; box-shadow: 0px 0px 15px 0px rgba(199, 64, 59, 0.5);} .about .join-us .join-content .join-list .join-item .hover-area:hover >h3{color: #fff;} .about .join-us .join-content .join-list .join-item .hover-area:hover >p{color: #E3A09D;} .about .join-us .join-content .join-list .join-item .hover-area:hover .join-next{background-position: -112px -10px;} .about .join-us .join-content .join-btn-area{height: 50px; -webkit-transition: all linear .2s !important; -o-transition: all linear .2s !important; transition: all linear .2s !important; float: right; margin-right: 20px;} .about .join-us .join-btn-area .join-Btn{width: 32px;width: 32px; height: 32px; background: #FFFFFF; border: 1px solid #EEEEEE; float: left; color: #ccc; font-size: 20px;font-size: 30px; font-weight: lighter;line-height: 32px; text-align: center; cursor: pointer; transition: all ease-in-out .3s; margin-right: 7px;} .about .join-us .join-btn-area .join-Btn.left{margin-right: 10px; background: url("../images/about/arrow-icon.png")no-repeat 0px -2px;} .about .join-us .join-btn-area .join-Btn.right{background: url("../images/about/arrow-icon.png")no-repeat -83px -2px;} /* 动效 */ .about .join-us .join-btn-area .join-Btn:hover{background-color:#C7403B ;} .about .join-us .join-btn-area .join-Btn.left:hover{ color: #fff;background-position: -29px -2px;} .about .join-us .join-btn-area .join-Btn.right:hover{color: #fff;background-position: -56px -2px;} /* about-资质荣誉 */ .company-honor{line-height: 1;padding-top: 50px;} .company-honor .honor-title{text-align: center;} .company-honor .honor-content{text-align: center;} .company-honor .honor-content .tabs-header{ position: relative;margin-top: 30px;} .company-honor .honor-content .tabs-title{display: block; width: 1200px; margin: 0 auto; position: relative;} .company-honor .honor-content .tabs-title li{margin-right: 35px; font-size: 16px; color: #333;} .company-honor .honor-content .tabs-title li:first-child{margin-left: 17px;} .company-honor .honor-content .tabs-title li:last-child{margin-right: 17px;} .company-honor .honor-content .tabs-header .tabs-scrollbar{bottom: 0px;} .company-honor .honor-content .tabs-content{background: #fcfcfc; height: auto; padding-top: 40px; border-top: 1px solid #eee; } .company-honor .honor-content .tabs-content li {width: 1200px; margin: 0 auto; height: auto;} .company-honor .honor-content .tabs-content li ul li{width: 280px;height: 316px; margin-right: 20px; margin-bottom: 53px; border-radius: 5px; float: left; text-align: center;} .company-honor .honor-content .tabs-content li ul li:nth-of-type(4n){margin-right: 0px;} .company-honor .honor-content .tabs-content li ul li img{width: 280px;height: 290px; margin-bottom: 11px; background: #FFFFFF; border-radius: 5px;} .company-honor .honor-content .tabs-content li ul li p{font-size: 14px; color: #999;} /* .company-honor .honor-content .tabs-content ul.active-content{display: block;} */ .company-honor .honor-content .tabs-title .active-title{color: #c74038;} /* about-联系我们 */ .about .contact-area{width: 100%; height:808px; padding-top:50px;} .about .contact-area .contact-way{width: 1200px; margin: 0 auto;} .about .contact-area .contact-way .contact-title{text-align: center;} .about .contact-area .contact-way .map-area{position: relative;font-size: 16px;} .about .contact-area .contact-way .info-box{position: absolute; left: 30px; top: 30px; width: 320px;height: 200px; background: #FBFBFB;border-radius: 5px; box-shadow: 0px 0px 15px 0px rgba(199,63,59,0.20); padding: 30px; box-sizing: border-box;} .about .contact-area .contact-way .info-box h3{position:relative; border: none; outline: none; background:transparent; font-size: 24px; cursor: pointer; font-weight: 400; padding-bottom: 19px; border-bottom: 1px solid #ccc;} .about .contact-area .contact-way .info-box li{display: none;} .about .contact-area .contact-way .info-box li.showarea{display: block;} .about .contact-area .contact-way .info-box li > div{position: relative; font-size: 14px; color: #999; margin-top: 12px; padding-left: 30px; background-size: 15px auto; line-height: 24px;} .about .contact-area .contact-way .info-box li .phone{background: url("../images/about/phone.png")no-repeat left center;} .about .contact-area .contact-way .info-box li .address{background: url("../images/about/address.png")no-repeat left top;} .about .contact-area .contact-way .company-list{width: 1200px; margin: 0px auto ; text-align:center; line-height: 1;} .about .contact-area .contact-way .company-list ul{display: inline-block;} .about .contact-area .contact-way .company-list li{float: left; margin-right: 130px; cursor: pointer; color: #999; padding:40px 20px 32px;} .about .contact-area .contact-way .company-list li:last-child{margin-right: 0px;} .about .contact-area .contact-way .company-list li.showarea{color: #c74038; font-weight: bold;} .about .contact-area .contact-way .map-area .map{height: 455px;width: 1200px;margin: 0 auto;} .about .contact-area .contact-way .map-area .map-text{position: absolute; width: 320px; height: 200px;left: 30px; top: 30px; border: 1px solid #eee;background: #FBFBFB; -webkit-box-shadow: 0px 0px 15px 0px rgba(200, 64, 60, 0.2); box-shadow: 0px 0px 15px 0px rgba(200, 64, 60, 0.2); border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; } .about .contact-area .contact-way .map-area .map-text > h3{font-size: 24px; font-weight: 400; border-bottom: 1px solid #ccc; padding-bottom: 26px; line-height: 24px; margin-bottom: 22px;} .about .contact-area .contact-way .map-area .map-text > p{font-size: 14px; color: #9a9a9a; margin-bottom: 5px; line-height: 24px; width: 220px;} .about .contact-area .contact-way .contact-list{height: 106px; width: 100%; border: 1px solid #EEEEEE; border-radius: 0px 0px 5px 5px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 23px 107px;} .about .contact-list .contact-item{float: left; width: 185px; margin-right: 81px;} .about .contact-list .contact-item:last-of-type{ margin-right: 0px;} .about .contact-list .contact-item > img{margin-right: 20px; float: left; padding: 17px; border: 1px solid #C8403C; border-radius: 50%; width: 60px; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box;} .about .contact-list .contact-item .item-text{font-size: 14px; overflow: hidden; margin-top: 10px; font-weight: 400;} .about .contact-list .contact-item .item-text > h3{ margin-bottom: 5px; font-weight: 400;} /* about页 end */ /* 资讯页 */ /* 资讯 */ .real-time-info{min-width:1350px} .real-time-info .headline-area{width: 1200px; margin: 0 auto; } .real-time-info .headline-title{padding-top: 70px; margin-bottom: 39px; overflow: hidden;} .real-time-info .headline-title > h3{font-size: 26px; float: left;} .real-time-info .headline-title > p > a{float: right; font-size: 14px; font-weight: 400; color: #999;} .real-time-info .list{ list-style: none; width: 1200px; margin: 0 auto;} .real-time-info .list > li{float: left; } .real-time-info .list > li:nth-of-type(3n) > .graphic-box{ margin-right: 0px;} .real-time-info .list > li > a > img{width:384px; height:190px;} .real-time-info .graphic-box{width: 384px; display: inline-block; margin: 0px 24px 70px 0px; -webkit-transition: all linear .2s; -o-transition: all linear .2s; transition: all linear .2s;} .real-time-info .graphic-img{height: 190px;} .real-time-info .graphic-img.pic1{background: url("../images/real-time-info/headline1.png")no-repeat center center; } .real-time-info .graphic-img.pic2{background: url("../images/real-time-info/headline2.png")no-repeat center center; } .real-time-info .graphic-img.pic3{background: url("../images/real-time-info/headline3.png")no-repeat center center; } .real-time-info .graphic-info{height: 151px;line-height: 1; text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box; padding: 20px 28px 20px 20px; color: #333; } .real-time-info .graphic-info > h1{font-size: 18px; line-height: 18px; margin-bottom: 20px; text-align: left; white-space:nowrap;overflow:hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;font-weight: 400;} .real-time-info .graphic-info > p{color: #999; line-height: 22px; font-size: 16px; text-align: left; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .real-time-info .graphic-info > span{display: block; float: right; color: #ccc; font-size: 16px; margin-top: 20px;} .real-time-info .graphic-box:hover{ -webkit-box-shadow: 0px 0px 10px 0px rgba(199, 64, 59, 0.3); box-shadow: 0px 0px 10px 0px rgba(199, 64, 59, 0.3);} .real-time-info .headline-area2{ padding-bottom: 109px; background: #fcfcfc;} .real-time-info .headline-area2 .headline2-content {width: 1200px; margin: 0 auto;} .real-time-info .headline-area2 .headline-list2{ margin-bottom: 40px; margin-left:-20px;} .real-time-info .headline-list2 .headline-item2{width: 100%; height: 242px; padding: 20px 40px; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; border-bottom: 1px solid #eee; cursor: pointer;-webkit-box-sizing: border-box;box-sizing: border-box;} .real-time-info .headline-list2 .headline-item2 .observe-pic{width: 287px; height: 202px; margin-right: 40px; float: left;} .real-time-info .headline-list2 .headline-item2 .observe-info{display: inline-block;} .real-time-info .headline-list2 .headline-item2 .observe-info > h3{font-size: 18px; line-height: 1; margin-top: 28px; margin-bottom: 21px;} .real-time-info .headline-list2 .headline-item2 .observe-info > p{width: 1130px; margin-bottom: 31px; line-height: 24px; font-size:14px;color:#999;} .real-time-info .headline-list2 .headline-item2 .observe-info > span{display: block; margin-bottom: 10px;} .real-time-info .headline-list2 .headline-item2 .observe-info > span > i{font-style: normal; color: #333;} .real-time-info .headline-list2 .headline-item2 .observe-info > span > i:first-child{border-right: 1px solid #CCC;font-size: 14px; padding-right: 20px;display: inline-block;line-height: 13px;} .real-time-info .headline-list2 .headline-item2 .observe-info > span > i:last-child{margin-left: 20px; color: #ccc;font-size:14px;font-weight:200;} .real-time-info .headline-list2 .headline-item2 .observe-info > .icon-next{background: url("../images/case/arrow-Enter.png") no-repeat center right; width: 1130px; height: 17px;opacity: 0; -webkit-transition: all linear .2s; -o-transition: all linear .2s; transition: all linear .2s; } .real-time-info .headline-list2 .headline-item2:hover{-webkit-box-shadow: 0px 0px 15px 0px rgba(200, 64, 60, 0.2);box-shadow: 0px 0px 15px 0px rgba(200, 64, 60, 0.2); -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px);} .real-time-info .headline-list2 .headline-item2:hover .observe-info .icon-next{opacity: 1;} .real-time-info .headline-list2 .headline-item2:hover .observe-info h3{color: #C8403C;} .real-time-info .headline-list2 .headline-item2:hover .observe-info p{color: #C8403C;} /* 图片区 */ .real-time-info .headline-list2 .headline-item2 > .observe-pic.pic1{background: url("../images/real-time-info/headline4.png")no-repeat center center;} .real-time-info .headline-list2 .headline-item2 > .observe-pic.pic2{background: url("../images/real-time-info/headline5.png")no-repeat center center;} .real-time-info .headline-list2 .headline-item2 > .observe-pic.pic3{background: url("../images/real-time-info/headline6.png")no-repeat center center;} .real-time-info .headline-list2 .headline-item2 > .observe-pic.pic4{background: url("../images/real-time-info/headline7.png")no-repeat center center;} /* 资讯页end */ /* 联系我们 */ .channl-cooperation .channl-content{width: 1200px; margin: 0 auto; font-size: 16px; color: #333; line-height: 1;} .channl-cooperation .channl-content .form-area{width: 840px;-webkit-box-shadow: 0px 0px 15px 0px rgba(51, 51, 51, 0.1); box-shadow: 0px 0px 15px 0px rgba(51, 51, 51, 0.1); border-radius: 10px; position: relative; top: -76px; left: 50%; margin-left: -400px; background: #fff; padding: 50px; -webkit-box-sizing:border-box; box-sizing:border-box} .channl-cooperation .form-area .form-list{position: relative; border-bottom: 1px solid #eee;} .channl-cooperation .form-list .form-item{width: 350px; margin: 0px 40px 39px 0; float: left; } .channl-cooperation .form-list .form-item:nth-of-type(2n){margin-right: 0px;} .channl-cooperation .form-list .form-item >.label{margin-bottom: 10px;} .channl-cooperation .form-list .form-item >.label > p{font-weight: bold;} .channl-cooperation .form-list .form-item >.label > i{vertical-align: text-top; color: #C7403B;} .channl-cooperation .form-list .form-item > input{width: 350px; height: 40px; outline: none; border: 1px solid #eee; border-radius: 5px; -webkit-transition: all linear .2s; -o-transition: all linear .2s; transition: all linear .2s; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;} .channl-cooperation .form-list .form-item > input:focus{border:1px solid #C7403B;} .channl-cooperation .form-area .vertify-area{margin-top: 50px; padding-left: 128px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 30px;} .channl-cooperation .form-area .vertify-area > #v-container{display: inline-block; margin-right: 12px;} .channl-cooperation .form-area .vertify-area > input{width: 190px; height: 50px; display: inline-block; vertical-align: top; border:1px solid #eee;outline: none; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;} .channl-cooperation .form-area .vertify-area > button#submit{width: 98px; height: 50px;background: #C7403B;border: 1px solid #EEEEEE; border-radius: 0px 5px 5px 0px; color: #fff; vertical-align: top;} .channl-cooperation .form-area > p{font-size: 22px; text-align: center;} .channl-cooperation .form-area > p >span{color: #C7403B;} .channl-cooperation #errMsg{position: absolute; bottom: 10px; left: 40%;} /* 联系我们 end */ /* 教师信息技术人才培养服务 */ #serve-list{line-height: 1;} /* 服务首页通用标题 */ #serve-list .title{display: inline-block; margin: 50px auto 30px; text-align: center; color: #343434; font-weight: bold; position: relative;} #serve-list .title>p{font-size: 26px; margin-bottom: 10px;} #serve-list .title .line{ width: 30px; height:4px;background-color:#40C480; -webkit-transition: all linear 0.3s; -o-transition: all linear 0.3s; transition: all linear 0.3s;margin: 0 auto ;} #serve-list .area-title{position: relative;} #serve-list .area .more{position: absolute; right: 0px; top: 50%; transform: translateY(-50%);color: #4CA683; font-size: 14px; cursor: pointer;} #serve-list .area .more a{color: #4CA683;} #serve-list .area .more::after{content: "+"; display: inline-block;border: 1px solid #4CA683; box-sizing: border-box; border-radius: 50%; margin-left: 4px; width: 14px;height: 14px;line-height: 10px;text-align: center;} #serve-list .title.white{color: #fff;} #serve-list .title.white .line{background: #fff;} #serve-list .line.white{background: #fff;} #serve-list .desc{font-size: 20px; color: #666; margin-bottom: 40px;} #serve-list .title.color{color: #fff;} #serve-list .title.color .line{background: #fff;} #serve-list .title:hover .line{width: 100%;} #serve-list .subtitle{margin-bottom: 60px;} #serve-list .subtitle > p{ color: #666; line-height: 30px; font-weight: bold;} /* banner */ #serve-list .ny-banner{position: relative; width: 100%; height: 550px; min-width: 1350px; overflow: hidden;} #serve-list .ny-banner >img{position: absolute; top: 0; left: 50%; margin-left: -960px; height: 550px;} #serve-list .ny-banner .ny-banner-title{text-align: center; width: 1200px; margin: 0 auto;} #serve-list .ny-banner .ny-banner-title > h3{padding: 154px 0px 39px 0px; font-size: 48px; font-weight: bold; color: #fff; } #serve-list .ny-banner .ny-banner-title > p{ font-size: 24px; font-weight: 400; color: #4CA683; line-height: 42px; color: #Fff; width: 1130px; margin: 0 auto 83px;} #serve-list .ny-banner .ny-banner-title .serve-btn{width: 180px; height: 50px; margin: 0 auto;} #serve-list .ny-banner .ny-banner-title > .serve-btn > a{border-radius: 25px; background: #fff; color: #4CA683; padding: 12.5px 56px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all ease-in-out .6s; -o-transition: all ease-in-out .6s; transition: all ease-in-out .6s; border: 2px solid transparent; position: relative;z-index: 100;} #serve-list .ny-banner .ny-banner-title > .serve-btn >a:hover{border: 2px solid #fff; background: #4CA683; color: #fff;} /* 培训与合作 */ #serve-list .content{width: 100%;} #serve-list .area{width: 1200px; margin: 0 auto; text-align: center;} #serve-list .content0{background: #f8f8f8; height: 560px;} #serve-list .train-content .train-list{ margin-bottom: 13px;} #serve-list .train-content .train-list li{width: 370px; height: 280px; float: left; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 31px 49px 28px; margin-right: 45px; background: #fff;box-shadow: 0px 5px 18px 2px rgba(13, 5, 9, 0.05);} #serve-list .train-content .train-list li:last-child{margin-right: 0px;} #serve-list .train-content .train-list li img{margin-bottom: 20px;} #serve-list .train-content .train-list li h3{font-size: 20px; margin-bottom: 12px;} #serve-list .train-content .train-list li p{font-size: 16px; color: #999; line-height: 28px;} #serve-list .train-content .train-wrapper{position: relative;} #serve-list .train-content .train-swiper{width: 1050px; height:380px ;border: 1px solid #EEEEEE; -webkit-box-shadow: 0px 5px 18px 2px rgba(13, 5, 9, 0.05); box-shadow: 0px 5px 18px 2px rgba(13, 5, 9, 0.05); border-radius: 10px; margin: 0 auto 30px; overflow: hidden;} #serve-list .train-content .train-wrapper .train-arrow{position: absolute; width: 18px; height: 41px; top: 50%; cursor: pointer;} #serve-list .train-content .train-wrapper .train-arrow.prev{ background: url('../images/serve-list/green-prev.png')no-repeat center center; left: 20px;} #serve-list .train-content .train-wrapper .train-arrow.next{ background: url('../images/serve-list/green-next.png')no-repeat center center; right: 20px;} #serve-list .train-content .train-wrapper .train-points{margin-bottom: 80px;} #serve-list .train-swiper .train-swiper-list {} #serve-list .train-swiper .train-swiper-list .train-swiper-item{padding: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; } #serve-list .train-swiper-list .train-swiper-item > img{ width: 496px; height: 352px; float: left; margin-right: 30px; border-radius: 10px;} #serve-list .train-swiper-list .train-swiper-item > .text-area{ text-align: left;overflow: hidden;} #serve-list .train-swiper-list .train-swiper-item > .text-area > h3{font-size: 24px; font-weight: bold; padding:30px 30px 9px 0px;font-weight: 400;} #serve-list .train-swiper-list .train-swiper-item > .text-area > h3 > span{margin-left: 10px; font-size: 14px; color: #999;} #serve-list .train-swiper-list .train-swiper-item > .text-area > p{padding-bottom: 15px; border-bottom: 1px solid #eee; padding-top: 15px; line-height: 28px; position: relative; padding-left: 25px;} #serve-list .train-swiper-list .train-swiper-item > .text-area > p::before{content: ""; width: 9px; height: 9px; border: 2px solid #3FC380; border-radius: 50%; position: absolute; left: 0px; top:23px; margin-right: 10px;} /* 近期直播课 */ #serve-list .content1{height: 576px;} #serve-list .area1-content{height: 385px; width: 1240px; margin-left: -20px; min-width: 1200px;} #serve-list .area1-content li{width: 310px; height: 385px; float: left;} #serve-list .area1-content li .hover-area{padding: 20px; box-sizing: border-box; transition: all ease-in-out .3s;} #serve-list .area1-content li .pic{width: 270px; height: 160px; position:relative;} #serve-list .area1-content li .pic img{width: 270px; height: 160px;} #serve-list .area1-content li .pic .mask{position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(63, 195, 128, 0.7); opacity: 0; -webkit-transition: all linear 0.6; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; transform:scale(0);} #serve-list .area1-content li .pic .mask .code{width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 5px solid #fff;} #serve-list .area1-content li .pic .suke-logo{background: url("../images/serve-list/wx-logo.png")no-repeat center center; width: 30px; height: 30px; border-radius: 5px;position: absolute; left: 50%; top: 50%; transform: translate(-50% ,-50%); background-size:100% 100%} #serve-list .area1-content li:hover .mask{ opacity: 1; transform:scale(1);} #serve-list .area1-content li .text-area{padding-top: 20px; text-align: left; } #serve-list .area1-content li .text-area h3{font-size: 16px; margin-bottom: 14px; transition: all ease-in-out .3s; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #serve-list .area1-content li .text-area p{font-size: 12px; line-height: 24px; padding-bottom: 12px; border-bottom: 1px solid #eee;margin-bottom: 20px; box-sizing: border-box;} #serve-list .area1-content li .text-area .lecturer{font-size: 12px; color: #999; margin-bottom: 25px;} #serve-list .area1-content li .text-area .info{font-size: 12px; color: #999; height: 17px; line-height: 17px;} #serve-list .area1-content li .text-area .info .price{font-size: 17px; float: left; color: #3FC380; } #serve-list .area1-content li .text-area .info .price span{font-size: 12px;font-weight: bold;} #serve-list .area1-content li .text-area .info .duration{float:right; margin-top: 3px;} /* 动效 */ #serve-list .area1-content li .hover-area:hover{box-shadow: 0px 5px 18px 2px rgba(13, 5, 9, 0.05); transform: translateY(-20px);} #serve-list .area1-content li .hover-area:hover .text-area h3{color: #3FC380;} /* 线上精品课 */ #serve-list .content3{height: 1000px; background: #F8F8F8;} #serve-list .area3-content{height: 385px; width: 1240px; margin-left: -20px; min-width: 1200px;} #serve-list .area3-content li{width: 310px; height: 385px; float: left; margin-bottom:20px;} #serve-list .area3-content li .hover-area{padding: 20px; box-sizing: border-box; transition: all ease-in-out .3s;} #serve-list .area3-content li .pic{width: 270px; height: 160px; } #serve-list .area3-content li .pic img{width: 270px; height: 160px;} #serve-list .area3-content li .pic{width: 270px; height: 160px; position:relative;} #serve-list .area3-content li .pic img{width: 270px; height: 160px;} #serve-list .area3-content li .pic .mask{position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(63, 195, 128, 0.7); opacity: 0; -webkit-transition: all linear 0.6; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; transform:scale(0);} #serve-list .area3-content li .pic .mask .code{width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);border: 5px solid #fff;} #serve-list .area3-content li .pic .suke-logo{background: url("../images/serve-list/wx-logo.png")no-repeat center center; width: 30px; height: 30px; border-radius: 5px;position: absolute; left: 50%; top: 50%; transform: translate(-50% ,-50%); background-size:100% 100%} #serve-list .area3-content li:hover .mask{ opacity: 1; transform:scale(1);} #serve-list .area3-content li .text-area{padding-top: 20px; text-align: left; } #serve-list .area3-content li .text-area h3{font-size: 16px; margin-bottom: 14px; transition: all ease-in-out .3s; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #serve-list .area3-content li .text-area p{font-size: 12px; line-height: 24px; padding-bottom: 12px; border-bottom: 1px solid #eee;margin-bottom: 20px; box-sizing: border-box;} #serve-list .area3-content li .text-area .lecturer{font-size: 12px; color: #999; margin-bottom: 25px;} #serve-list .area3-content li .text-area .info{font-size: 12px; color: #999; height: 17px; line-height: 17px;} #serve-list .area3-content li .text-area .info .price{font-size: 17px; float: left; color: #3FC380; } #serve-list .area3-content li .text-area .info .price span{font-size: 12px;font-weight: bold;} #serve-list .area3-content li .text-area .info .duration{float:right; margin-top: 3px;} #serve-list .area3-content li .text-area .info .views{float:right; margin-top: 3px;} /* 动效 */ #serve-list .area3-content li .hover-area:hover{box-shadow: 0px 5px 18px 2px rgba(13, 5, 9, 0.05); transform: translateY(-20px); background: #fff;} #serve-list .area3-content li .hover-area:hover .text-area h3{color: #3FC380;} /* 近期培训课程 */ #serve-list .content2{width: 100%; height: 659px;} #serve-list .area2-content{position: relative; margin-top: 20px;} #serve-list .area2-left{ float: left;} #serve-list .area2-left .area2-timer{position: absolute; top: 23px; left: 113px; width: 1px; height: 370px; background: #343434;} #serve-list .area2-left .area2-menu{ list-style: none;width:85px;} #serve-list .area2-left .area2-menu li{position: relative; text-align: end; margin-bottom: 51px;} #serve-list .area2-left .area2-menu li h3{font-size: 36px; line-height: 28px; margin-bottom: 14px;} #serve-list .area2-left .area2-menu li p{font-size: 14px;} #serve-list .area2-left .area2-menu li span{position: relative; position: absolute; right: -36px; top: 18px; width:14px; height: 14px;background: #343434;border-radius: 50%;} #serve-list .area2-left .area2-menu li.active-timer{color: #40C480;} #serve-list .area2-left .area2-menu li.active-timer span{ background: #40C480; } #serve-list .area2-left .area2-menu li.active-timer span::after{position: absolute;top: -3px; left: -3px; border-radius: 50%; content: "";width: 18px; height: 18px; border: 1px solid #40C480;} #serve-list .area2-right{width: 1065px;float:right; cursor: pointer; position: relative} #serve-list .area2-right .area2-list{list-style: none;} #serve-list .area2-right .area2-list .area2-box {position: relative; height: 70px; line-height: 70px; padding-left: 40px; -webkit-box-shadow: 1px 5px 18px 2px rgba(14, 5, 10, 0.05); box-shadow: 1px 5px 18px 2px rgba(14, 5, 10, 0.05); margin-bottom: 40px; vertical-align: middle;} #serve-list .area2-box .area2-prev{ font-size: 20px; } #serve-list .area2-box .area2-prev .clock{float: left; margin-right: 20px;} #serve-list .area2-box .area2-prev .book{float: left;} #serve-list .area2-box .area2-prev .clock>span{display: inline-block; background: url("../images/serve-list/clock-black.png"); width: 26px; height: 26px; vertical-align: sub;margin-right: 14px;} #serve-list .area2-box .area2-prev .book>span{display: inline-block; background: url("../images/serve-list/book-black.png"); width: 26px; height: 26px; vertical-align: sub;margin-right: 14px;} #serve-list .area2-box .area2-next{line-height: 0px; position: absolute; right: 41px; bottom: 17px; font-size: 12px; display: none;} #serve-list .area2-box .area2-next img{width: 26px;height: 26px;margin-bottom: 10px; background-size: cover; background-repeat: no-repeat;} #serve-list .area2-right .area2-list .area2-box.active-box {background-color: #40C480;font-weight: bold;} #serve-list .area2-right .area2-list .area2-box.active-box a .area2-prev{ color: #fff; } #serve-list .area2-right .area2-list .area2-box.active-box .clock>span{background: url("../images/serve-list/clock.png");} #serve-list .area2-right .area2-list .area2-box.active-box .book>span{background: url("../images/serve-list/book.png");} #serve-list .area2-right .area2-list .area2-box.active-box .area2-next{display: block;} /* 动效 */ #serve-list .area2-box .area2-next.layout{position: fixed;left: 0px; top: 0px; right: 0px; bottom: 0px; } /* 二维码弹出层 */ .popups-area{opacity: 0; z-index: -1000; position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.5);} .popups-area .popups{width: 350px; height: 250px; position: absolute; left: 50%; top: 50%; margin-left: -175px; margin-top: -125px; background: #fff; padding: 43px; box-sizing: border-box; text-align: center; transform: scale(0); transition: all ease-in-out .3s;} .popups-area .popups p{margin-bottom: 20px;} .popups-area .popups img{width: 128px; height: 128px;} .popups-area .popups .close{position: absolute;right: 10px; top: 5px; cursor: pointer; font-size: 18px;} .popups-area.active{opacity: 1; z-index: 1000;} .popups-area.active .popups{transform: scale(1);} /* 教师信息技术人才培养服务 end*/ /* 培训内容-查看更多内页 */ /* banner */ .ny-serve-list .ny-banner{position: relative; width: 100%; height: 550px; min-width: 1350px; overflow: hidden;} .ny-serve-list .ny-banner >img{position: absolute; top: 0; left: 50%; margin-left: -960px; height: 550px;} .ny-serve-list .ny-banner .ny-banner-title{text-align: center; width: 1200px; margin: 0 auto;} .ny-serve-list .ny-banner .ny-banner-title > h3{padding: 154px 0px 39px 0px; font-size: 48px; font-weight: bold; color: #fff; } .ny-serve-list .ny-banner .ny-banner-title > p{ font-size: 24px; font-weight: 400; color: #4CA683; line-height: 42px; color: #Fff; width: 1130px; margin: 0 auto 83px;} .ny-serve-list .ny-banner .ny-banner-title .serve-btn{width: 180px; height: 50px; margin: 0 auto;} .ny-serve-list .ny-banner .ny-banner-title > .serve-btn > a{border-radius: 25px; background: #fff; color: #4CA683; padding: 12.5px 56px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all ease-in-out .6s; -o-transition: all ease-in-out .6s; transition: all ease-in-out .6s; border: 2px solid transparent; position: relative;z-index: 100;} .ny-serve-list .ny-banner .ny-banner-title > .serve-btn >a:hover{border: 2px solid #fff; background: #4CA683; color: #fff;} .ny-serve-list .navigation{font-size: 12px; height: 36px; border-bottom: 1px solid #dcdcdc; line-height: 36px;} .ny-serve-list .navigation::before{content: ""; display: inline-block; width: 10px; height: 13px; margin-right: 10px;background: url("../images/serve-list/location.png")no-repeat center center; vertical-align: text-bottom;} /* 近期直播课 */ .ny-serve-list{line-height: 1; margin-bottom:100px;} .ny-serve-list .area-title{font-size: 26px;font-weight: bold;margin-top: 44px;margin-bottom: 40px;} .ny-serve-list .area1-content{ width: 1240px; margin-left: -20px; min-width: 1200px;} .ny-serve-list .area1-content li{width: 310px; height: 385px; float: left;} .ny-serve-list .area1-content li .hover-area{padding: 20px; box-sizing: border-box; transition: all ease-in-out .3s; height:385px;} .ny-serve-list .area1-content li .pic{width: 270px; height: 160px; position:relative;} .ny-serve-list .area1-content li .pic img{width: 270px; height: 160px;} .ny-serve-list .area1-content li .pic .mask{position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(63, 195, 128, 0.7); opacity: 0; -webkit-transition: all linear 0.6; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; transform:scale(0);} .ny-serve-list .area1-content li .pic .mask .code{width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 5px solid #fff;} .ny-serve-list .area1-content li .pic .suke-logo{background: url("../images/serve-list/wx-logo.png")no-repeat center center; width: 30px; height: 30px; border-radius: 5px;position: absolute; left: 50%; top: 50%; transform: translate(-50% ,-50%); background-size:100% 100%} .ny-serve-list .area1-content li :hover .mask{ opacity: 1; transform:scale(1);} .ny-serve-list .area1-content li .text-area{padding-top: 20px; text-align: left; } .ny-serve-list .area1-content li .text-area h3{font-size: 16px; margin-bottom: 14px; transition: all ease-in-out .3s; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .ny-serve-list .area1-content li .text-area p{font-size: 12px; line-height: 24px; padding-bottom: 12px; border-bottom: 1px solid #eee;margin-bottom: 20px; box-sizing: border-box;} .ny-serve-list .area1-content li .text-area .lecturer{font-size: 12px; color: #999; margin-bottom: 25px;} .ny-serve-list .area1-content li .text-area .info{font-size: 12px; color: #999; height: 17px; line-height: 17px;} .ny-serve-list .area1-content li .text-area .info .price{font-size: 17px; float: left; color: #3FC380; } .ny-serve-list .area1-content li .text-area .info .price span{font-size: 12px;font-weight: bold;} .ny-serve-list .area1-content li .text-area .info .duration{float:right; margin-top: 3px;} .ny-serve-list .area1-content li .text-area .info .views{float:right; margin-top: 3px;} /* 动效 */ .ny-serve-list .area1-content li .hover-area:hover{box-shadow: 0px 5px 18px 2px rgba(13, 5, 9, 0.05); transform: translateY(-20px);} .ny-serve-list .pager{text-align:right; margin-top:90px;} .ny-serve-list .manu .current{ background:#3FC380!important;} .ny-serve-list .manu a:hover{background-color:#3FC380!important;} /* 一流课程建设 */ #course-build {line-height: 1;} #course-build .ny-banner{width: 100%; height: 600px; position: relative; left: 0px; top: -80px; background: url("../images/course-construction/banner.png")no-repeat top center; min-width:1350px} #course-build .ny-banner > img{width: 100%; height: 600px; min-width: 1350px; background-size: contain;} #course-build .ny-banner .ny-banner-title{ text-align: center; width: 1200px; margin: 0 auto; color: #fff;} #course-build .ny-banner-title > h3{font-size: 60px; font-weight: 400; padding-top: 190px; padding-bottom: 43px;} #course-build .ny-banner-title > p{font-size: 20px; margin-bottom: 110px; font-weight: 300; opacity: .7;} #course-build .ny-banner-title >.course-btn{width: 180px; height: 50px; margin: 0 auto;} #course-build .ny-banner-title >.course-btn > a{ border-radius: 25px; background: #fff; color: #0B9FDE; padding: 12px 56px; -webkit-box-sizing: border-box; box-sizing: border-box;border: 2px solid; -webkit-transition: all ease-in-out .3s; -o-transition: all ease-in-out .3s; transition: all ease-in-out .3s; border: 2px solid transparent; position: relative;z-index: 100;} #course-build .ny-banner-title >.course-btn > a:hover{border: 2px solid #fff; background: #0B9FDE; color: #fff;} #course-build .title{ display: inline-block; text-align: center; font-weight: 300; margin-bottom: 30px; } #course-build .title .bg-text{position: relative;font-size: 55px;font-weight: 300;color: rgba(28, 31, 37, 0.05);line-height: 99px; text-align: center;} #course-build .title .bg-text >h3{position: absolute; bottom: 1%; left: 32%; font-size: 28px; color: #333;} #course-build .title.white .bg-text{color: rgba(255, 255, 255, 0.05);} #course-build .title.white .bg-text h3{color: #fff;} #course-build .course-content {min-width: 1350px;} #course-build .course-content1 {margin-bottom: 80px;} #course-build .course-content1 .content1-area{width: 1200px; height: 394px; margin: 0 auto; background: #FFFFFF; -webkit-box-shadow: 0px 0px 15px 0px rgba(11, 159, 222, 0.15); box-shadow: 0px 0px 15px 0px rgba(11, 159, 222, 0.15); border-radius: 10px; position: relative; z-index: 100;} #course-build .course-content1 .content1-area::before{position: absolute; display: block;content:""; background: url("../images/course-construction/area1-left.png")no-repeat center center; width:64px; height:59px; left: -30px; top: -30px; z-index: -1;} #course-build .course-content1 .content1-area::after{position: absolute; display: block;content:""; background: url("../images/course-construction/area1-right.png")no-repeat center center;width: 68px; height: 68px; right: -30px; top: -30px; z-index: -100;} #course-build .content1-area .content1-pic{background: url("../images/course-construction/content1-pic.png")no-repeat center center; width: 600px; height: 394px; float: left;} #course-build .content1-area .content1-box {overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 50px; text-align: left; box-sizing: border-box;} #course-build .content1-area .content1-box > h3{font-size: 24px; color: #0066ff; font-weight: bld; margin-bottom: 30px; position: relative;} #course-build .content1-area .content1-box > h3:before{content: ""; background: url("../images/course-construction/quote-left.png")no-repeat center center ; width: 58px; height: 45px; position: absolute; left: -36px; top:-24px} #course-build .content1-area .content1-box > p{line-height: 28px; margin-bottom: 30px;} #course-build .content1-area .content1-box > span{position: relative; color: #999;font-size: 14px; line-height: 24px; margin-bottom: 5px; display: block; margin-left: 20px;} #course-build .content1-area .content1-box > span:before{content: ""; display: block; border: 1px solid #0066ff; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: -20px; top: 7px;} #course-build .course-content2{background: url("../images/course-construction/content2-bg.png")no-repeat center center; min-width: 1350px; height: 520px; width: 100%; margin-bottom: 230px;} #course-build .course-content2 .content2-title{width: 1200px; margin: 0 auto; text-align: center;} #course-build .course-content2 .content2-area{width: 1200px; height: 580px; background: #FFFFFF; -webkit-box-shadow: 0px 0px 15px 0px rgba(11, 159, 222, 0.15); box-shadow: 0px 0px 15px 0px rgba(11, 159, 222, 0.15); border-radius: 10px; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 50px 40px; text-align: center;} #course-build .content2-area > h3 {font-size: 20px;font-weight: bold;} #course-build .content2-area .content2-list {} #course-build .content2-area .content2-list > li{position: relative; padding-bottom: 30px; border-bottom: 1px solid #eee; margin-top: 40px;} #course-build .content2-area .content2-list > li.blue::after{content: ""; background: url("../images/course-construction/bule-arrow.png")no-repeat center center; bottom: -19px; position: absolute; left: 50%; width: 28px; height: 39px; margin-left: -58px;} #course-build .content2-area .content2-list > li.green::after{content: ""; background: url("../images/course-construction/green-arrow.png")no-repeat center center; bottom: -19px; position: absolute; left: 50%; width: 28px; height: 39px; margin-left: -58px;} #course-build .content2-area .content2-list > li.no-line{border: 0px;} #course-build .content2-list li .left-item{float: left; margin-right: 50px;} #course-build .content2-list li .left-item > img{width: 117px; height: 62px; margin-bottom: 10px; } #course-build .content2-list li .left-item > p{font-size: 18px; font-weight:bold} #course-build .content2-list li .right-items{overflow: hidden;} #course-build .content2-list li .right-items li{float: left; width: 100px; height:62px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 11px; border: 1px solid #5f72cf; border-radius: 10px; margin-right: 19px; position: relative; line-height: 20px; font-size: 15px; display: table;} #course-build .content2-list li .right-items li > span{display: table-cell; vertical-align: middle;} #course-build .content2-list li .right-items.blue li{border-color: #5f72cf; color:#5f72cf ;} #course-build .content2-list li .right-items.green li{color: #44c583; border-color: #44c583;} #course-build .content2-list li .right-items.orange li{color: #DC9A62; border-color: #DC9A62;} #course-build .content2-list li .right-items li::after{content: ""; display: block; border: 8px solid; position: absolute;right: -22px; top: 50%; margin-top: -6px;} #course-build .content2-list li .right-items.blue li::after{ border-color: transparent transparent transparent #5f72cf;} #course-build .content2-list li .right-items.green li::after{ border-color: transparent transparent transparent #44c583;} #course-build .content2-list li .right-items.orange li::after{ border-color: transparent transparent transparent #DC9A62;} #course-build .content2-list li .right-items li.no-angle::after{border: 0px;} #course-build .course-content3{text-align: center;} /* #course-build .course-content3 .content3-area{height: 2000px;} */ #course-build .course-content3 .content3-area .tabs-header .tabs-title .tab-title.active-title{color:#0066ff ;} #course-build .tabs-content {padding-top: 0px; height: auto;} #course-build .tabs-content .tab-box {height: auto; padding-bottom:70px} #course-build .tabs-content .tab-box .tab-subtitle > p{position: relative; width: 928px; margin: 30px auto 80px; line-height: 30px;} #course-build .tabs-content .tab-box .tab-subtitle> p::before, #course-build .tabs-content .tab-box .tab-subtitle > p::before {content: ""; background: url("../images/course-construction/quote-left.png")no-repeat center center ; width: 58px; height: 45px; position: absolute; left: -75px; top:-30px} #course-build .tabs-content .tab-box .tab-subtitle > p::after, #course-build .tabs-content .tab-box .tab-subtitle > p::after{content: ""; background: url("../images/course-construction/quote-right.png")no-repeat center center ; width: 58px; height: 45px; position: absolute; right: -80px; top:40px} #course-build .tabs-content .tab-box .tab-subtitle.tab1-title{margin-top: 80px;} #course-build .tabs-content .tab-box1 > img{width: 1075px; margin: 0 auto; } /* tab3-box */ #course-build .tabs-content .tab3-box{background:#FBFBFB; height: 2422px;} #course-build .tabs-content .tab3-box .tab3-title{padding-top: 60px;} /* #course-build .tab3-box .tab3-title > p{} */ #course-build .tab3-box .tab3-title > p > i{font-style: normal; color: #0066FF;} #course-build .tab3-box .tab3-title > img{width: 480px; height:349px; background-size: cover; margin: 0 auto 60px;} #course-build .tab3-box .tab3-content{background: #fff; width: 1200px; margin: 0 auto; padding: 49px 53px 49px 51px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left;} #course-build .tab3-box .tab3-content > .tab3-area1 { border-bottom: 1px solid #eee;} #course-build .tab3-content > .tab3-area1 > h3{position: relative; font-size: 20px; margin-bottom: 29px; font-weight: bold;} #course-build .tab3-content > .tab3-area1 > h3::after{position: absolute; left: 181px; bottom: 0px; content: ""; display: block;width: 70px; height: 5px; background: #0066ff; opacity: .3;} #course-build .tab3-content > .tab3-area1 >p{font-weight: 400; margin-bottom: 42px;line-height: 30px;} #course-build .tab3-box .tab3-content > .tab3-area2{padding: 49px 0px 0px 0px; } #course-build .tab3-content > .tab3-area2 > h3{position: relative; margin-bottom: 29px;} #course-build .tab3-content > .tab3-area2 > h3::after{position: absolute; left: 86px; bottom: 0px; content: ""; display: block;width: 70px; height: 5px; background: #0066ff; opacity: .3;} #course-build .tab3-content > .tab3-area2 > p{position: relative; left: 20px; line-height: 30px; width: 1077px;} #course-build .tab3-content > .tab3-area2 > p::before{position: absolute;content: "";display: block; width: 7px; height: 7px; border: 1px solid #0066ff; border-radius: 50%; left: -22px; top: 10px;} #course-build .tab3-area2 > .tab3-area2-1{margin-top: 50px; text-align: center;} #course-build .tab3-area2 > .tab3-area2-1 > h3{color: #0066ff; margin-bottom: 35px;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list{width: 1200px; margin: 0 auto 80px;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li{width: 340px; height: 172px; border: 1px solid #E5E5E5; border-radius: 10px; padding: 0px 56px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0px 40px 40px 0px; float: left;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li:nth-of-type(3n){margin-right:0px ;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li > .tab3-item-pic{width: 64px; height: 71px; margin-bottom: 8px; display: inline-block;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li > h3{color: #0066ff;margin-bottom: 20px;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li > p{font-size: 14px; line-height: 18px;} #course-build .tab3-area2 > .tab3-area2-2{width: 858px; height: 480px; margin: 0 auto;} #course-build .tab3-area2 > .tab3-area2-2 > img{width: 858px; height: 480px; margin: 0 auto;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li > .tab3-item-pic.pic1{background: url("../images/course-construction/3-icon-1.png")no-repeat center center;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li > .tab3-item-pic.pic2{background: url("../images/course-construction/3-icon-2.png")no-repeat center center;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li > .tab3-item-pic.pic3{background: url("../images/course-construction/3-icon-3.png")no-repeat center center;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li > .tab3-item-pic.pic4{background: url("../images/course-construction/3-icon-4.png")no-repeat center center;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li > .tab3-item-pic.pic5{background: url("../images/course-construction/3-icon-5.png")no-repeat center center;} #course-build .tab3-area2 > .tab3-area2-1 .tab3-list > li > .tab3-item-pic.pic6{background: url("../images/course-construction/3-icon-6.png")no-repeat center center;} /* tab4-box */ #course-build .tabs-content .tab4-box{background:#fbfbfb; padding-top: 60px;} #course-build .tabs-content .tab4-box > p{} #course-build .tabs-content .tab4-box .tab4-content{width: 1200px; margin: 0 auto; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 59px 61px 59px 50px; text-align: left;} #course-build .tabs-content .tab4-box .tab4-content .tab4-p > p{line-height: 30px; padding-bottom: 33px; border-bottom: 1px solid #eee;} #course-build .tabs-content .tab4-box .tab4-area1, #course-build .tabs-content .tab4-box .tab4-area2{padding: 70px 0px 0px 38px;background: url("../images/course-construction/circle.png")no-repeat 114px 188px; background-size: 287px 288px; margin-bottom: 80px; } #course-build .tabs-content .tab4-box .tab4-area2{position: relative; background-position: 705px 157px;} #course-build .tabs-content .tab4-box .tab4-area1 > .tab4-pic1, #course-build .tabs-content .tab4-box .tab4-area2 > .tab4-pic2{float: left; background: url("../images/course-construction/phone1.png")no-repeat center center; -webkit-box-shadow: 0px 0px 40px 0px rgba(14, 5, 10, 0.1); box-shadow: 0px 0px 40px 0px rgba(14, 5, 10, 0.1); border-radius: 40px; width: 253px; height: 520px; margin-right: 316px;} #course-build .tabs-content .tab4-box .tab4-area2 > .tab4-pic2{float: right; margin-right: 0px; background: url("../images/course-construction/phone2.png")no-repeat center center; } #course-build .tabs-content .tab4-box .tab4-area1 .tab4-info1{overflow: hidden; margin-top: 85px;} #course-build .tabs-content .tab4-box .tab4-area2 .tab4-info2{display: inline-block; width: 500px;} #course-build .tabs-content .tab4-box .tab4-area1 .tab4-info1 > h3, #course-build .tabs-content .tab4-box .tab4-area2 .tab4-info2 > h3, #course-build .tabs-content .tab4-box .tab4-area3 .tab4-info3 > h3 {position: relative; font-size: 24px; margin-bottom: 30px; padding-top: 28px;} #course-build .tabs-content .tab4-box .tab4-area1 .tab4-info1 > h3::before, #course-build .tabs-content .tab4-box .tab4-area2 .tab4-info2 > h3::before, #course-build .tabs-content .tab4-box .tab4-area3 .tab4-info3 > h3::before{ display: block;content: ""; width: 60px; height: 4px; background: #3fc380; -webkit-box-shadow: 0px 5px 10px 0px rgba(18, 165, 90, 0.25); box-shadow: 0px 5px 10px 0px rgba(18, 165, 90, 0.25); position: absolute;left: 0px; top: 0px;} #course-build .tabs-content .tab4-box .tab4-area1 .tab4-info1 .tab4-list, #course-build .tabs-content .tab4-box .tab4-area2 .tab4-info2 .tab4-box2{margin-bottom: 39px;} #course-build .tabs-content .tab4-box .tab4-area1 .tab4-info1 .tab4-list > li, #course-build .tabs-content .tab4-box .tab4-area2 .tab4-info2 .tab4-box2 > li{margin-bottom: 14px;position: relative; left: 13px;} #course-build .tabs-content .tab4-box .tab4-area1 .tab4-info1 .tab4-list > li::before, #course-build .tabs-content .tab4-box .tab4-area2 .tab4-info2 .tab4-box2 > li::before{display: block; content: ""; width:3px;height:3px;border-radius: 50%; background:#3fc380; position: absolute;left: -11px; top: 7px;} #course-build .tabs-content .tab4-box .tab4-area1 .tab4-info1 .tab4-list2{} #course-build .tabs-content .tab4-box .tab4-area1 .tab4-info1 .tab4-list2 > li{width: 80px;height: 80px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 17px 22px; color: #999; border: 1px solid #DDDDDD;border-radius: 5px; float: left; margin-right: 15px; line-height: 24px;} #course-build .tabs-content .tab4-box .tab4-area1 .tab4-info1 .tab4-list2 > li:last-child{margin-right: 0px;} #course-build .tabs-content .tab4-box .tab4-area3{text-align: center;} #course-build .tabs-content .tab4-box .tab4-area3 .tab4-info3 > h3::before{left: 515px;} #course-build .tabs-content .tab4-box .tab4-area3 .tab4-info3 > p{margin-bottom: 18px;} #course-build .tabs-content .tab4-box .tab4-area3 .tab4-pic3 {background: url("../images/course-construction/pic3.png")no-repeat center center; width: 971px; height: 360px; margin: 42px auto 0px; } /* 一流课程建设 end */ /* 专业资源库建设 */ #sourcelib{line-height: 1; text-align: center;} #sourcelib .sourcelib-banner{position: relative; left: 0px; top: -80px; background: url("../images/course-construction/sourcelib/sourcelib-banner.png")no-repeat top; height: 600px; min-width: 1350px; text-align: center;} #sourcelib .sourcelib-banner > h3{padding: 190px 0 43px; font-size: 60px; color: #fff;} #sourcelib .sourcelib-banner > p{font-size: 20px; padding-bottom: 110px; color: rgba(255, 255, 255, 0.7);} #sourcelib .sourcelib-banner .tec-btn{-webkit-box-sizing: border-box;box-sizing: border-box; font-size: 18px; margin: 0 auto;} #sourcelib .sourcelib-banner .tec-btn > a{color: #0b9fde; padding: 11px 52px ; border-radius: 25px; background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid transparent; -webkit-transition: .3s; -o-transition: .3s; transition: .3s;} #sourcelib .sourcelib-banner .tec-btn > a:hover{border: 2px solid #fff; background: #0b9fde; color: #fff;} #sourcelib .wrapper{min-width: 1350px;} /* 标题 */ #sourcelib .title{display: inline-block; text-align: center;font-weight: 300;} #sourcelib .title.pos1{margin-bottom: 101px;} #sourcelib .title.pos2{margin-top: 77px;} #sourcelib .title .bg-text{position: relative;font-size: 60px;color: rgba(28, 31, 37, 0.05);} #sourcelib .title .bg-text > h3{position: absolute; bottom: 28%; left: 35%; font-size: 24px; color: #333;} #sourcelib .title.white .bg-text h3{color: #fff;} #sourcelib .title.white .bg-text{color: rgba(255, 255, 255, 0.05);} #sourcelib .area1 > p{width: 928px;line-height: 30px; margin: 0 auto 103px; position: relative;} #sourcelib .area1 > p::before{content: ""; background: url("../images/course-construction/quote-left.png")no-repeat center center ; width: 58px; height: 45px; position: absolute; left: -75px; top:-32px} #sourcelib .area1 > p::after{content: ""; background: url("../images/course-construction/quote-right.png")no-repeat center center ; width: 58px; height: 45px; position: absolute; right: -75px; bottom:-15px} #sourcelib .area2 .subtitle > p{color: #fff; margin: 23px 0 51px;} #sourcelib .area2{background: url("../images/course-construction/sourcelib/area2-bg.png") no-repeat left top; height: 860px;} #sourcelib .area2 .part2-1{width: 1100px; height: 538px; margin: 0 auto;background: #fff; -webkit-box-shadow: 0px 0px 15px 0px rgba(11, 159, 222, 0.2); box-shadow: 0px 0px 15px 0px rgba(11, 159, 222, 0.2); border-radius: 10px; padding: 33px 55px 36px 45px; -webkit-box-sizing: border-box; box-sizing: border-box;} #sourcelib .area2 .part2-1 .detail > p{width: 928px; line-height:30px; margin: 0 auto 30px;} #sourcelib .area2 .part2-1 .header-area {height: 55px; line-height: 55px;} #sourcelib .area2 .part2-1 .header-area .tabs-title li{margin-right: 120px;} #sourcelib .area2 .part2-1 .header-area .tabs-title li:last-child{margin-right: 0px;} #sourcelib .area2 .part2-1 .header-area .active-title{color: #c74038;} #sourcelib .area2 .part2-1 .header-area .tabs-scrollbar{width:22px;bottom:6px} #sourcelib .area2 .part2-1 .tabs-content{padding-top: 43px;} #sourcelib .area2 .part2-1 .tabs-content li{height: auto;} #sourcelib .area2 .part2-1 .tabs-content .tab-box .area2-pic{width: 400px; height: 280px; margin-right: 39px; float: left;} #sourcelib .area2 .part2-1 .tabs-content .tab-box .area2-info{-webkit-box-sizing: border-box;box-sizing: border-box; padding-top: 11px; overflow: hidden; text-align: left;} #sourcelib .area2 .part2-1 .tabs-content .tab-box .area2-info > h3{ font-size: 26px; color: #c74038; margin-bottom: 30px;} #sourcelib .area2 .part2-1 .tabs-content .tab-box .area2-info > p{width: 561px; color: #999; line-height: 30px;} #sourcelib .area2 .part2-1 .tabs-content .tab-box .area2-pic.pic1{background: url("../images/course-construction/sourcelib/area2-pic-1.png")no-repeat center center;} #sourcelib .area2 .part2-1 .tabs-content .tab-box .area2-pic.pic2{background: url("../images/course-construction/sourcelib/area2-pic-2.png")no-repeat center center;} #sourcelib .area2 .part2-1 .tabs-content .tab-box .area2-pic.pic3{background: url("../images/course-construction/sourcelib/area2-pic-3.png")no-repeat center center;} /* 专业资源库建设end */ /* 教学能力大赛 */ .w-1200{width: 1200px; margin: 0 auto;} #tec-power{line-height: 1;} /* 解决方案页通用banner */ .solution-banner {position: relative;width: 100%; height: 600px; min-width: 1350px; background: url("../images/course-construction/tec-power/banner-tec.png") no-repeat center center; text-align: center; left:0px; top:-80px} .solution-banner > h3{font-size: 60px; padding: 190px 0 43px; color: #fff;} .solution-banner > p{font-size: 20px; padding-bottom: 110px; color: rgba(255, 255, 255, 0.7);} .solution-banner .tec-btn{-webkit-box-sizing: border-box;box-sizing: border-box; font-size: 18px; margin: 0 auto;} .solution-banner .tec-btn > a{color: #0b9fde; padding: 11px 52px ; border-radius: 25px; background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid transparent; -webkit-transition: .3s; -o-transition: .3s; transition: .3s;} .solution-banner .tec-btn > a:hover{border: 2px solid #fff; background: #0b9fde; color: #fff;} #tec-power .title{ display: inline-block; text-align: center;font-weight: 300;} #tec-power .title .bg-text >h3{position: absolute; top: 0; left: 33%; font-size: 28px; color: #333; font-size: 24px;} #tec-power .title .bg-text{position: relative;font-size: 55px;font-weight: 300;color: rgba(28, 31, 37, 0.05);line-height: 99px; text-align: center;} #tec-power .title.white .bg-text h3{color: #fff;} #tec-power .title.white .bg-text{color: rgba(255, 255, 255, 0.05);} #tec-power .wrapper{min-width:1350px} #tec-power .area1{text-align: center;} #tec-power .area1 > p{width: 943px;line-height: 30px; margin: 101px auto 137px; position: relative;} #tec-power .area1 > p::before{content: ""; background: url("../images/course-construction/quote-left.png")no-repeat center center ; width: 58px; height: 45px; position: absolute; left: -75px; top:-32px} #tec-power .area1 > p::after{content: ""; background: url("../images/course-construction/quote-right.png")no-repeat center center ; width: 58px; height: 45px; position: absolute; right: -75px; bottom:-15px} #tec-power .area2{text-align: center;} #tec-power .area2 .title .bg-text > h3{left: 20%;} #tec-power .area2 .part2-1 .tabs-header{margin-left: 50px;} #tec-power .area2 .part2-1 .tabs-header .tabs-title{font-size: 18px;} #tec-power .area2 .part2-1 .tabs-header .tabs-title > li{margin-right: 169px;} #tec-power .area2 .part2-1 .tabs-header .tabs-title > li:last-of-type{margin-right: 0;} #tec-power .area2 .part2-1 .tabs-header .tabs-title > li.active-title{font-weight: bold; font-size: 18px; color: #0066FF;} #tec-power .area2 .part2-1 .tabs-content{background: #fbfbfb; min-width: 1350px; height: 681px;} #tec-power .area2 .part2-1 .tabs-content .tab-box{width: 1200px; margin: 0 auto; text-align: left; height: 681px;} #tec-power .area2 .part2-1 .tabs-content .tab-box > p{font-weight: 400px; line-height: 40px; width: 930px; margin: 0 auto;} #tec-power .area2 .part2-1 .tabs-content .tab-box > p:first-of-type{padding:0px 0 40px ;} #tec-power .area2 .part2-1 .tabs-content .tab-box > p:last-of-type{padding-bottom:64px;} #tec-power .area2 .part2-1 .tabs-content .tab-box > p > i{font-size: 17px; color:#0066ff; font-weight:bold; -webkit-box-sizing: border-box; box-sizing: border-box; font-style: normal; margin-right: 20px; position: absolute;} #tec-power .area2 .part2-1 .tabs-content .tab-box > p > i::before{content: ""; display: inline-block; width:27px; height: 27px;background: rgba(0, 105, 255, 0.1); border-radius: 50%; position: absolute; left: -14px; top: 5px;} #tec-power .area2 .part2-1 .tabs-content .tab-box > p >span{display: inline-block; margin-left: 33px;} #tec-power .area2 .part2-1 .tabs-content .tab-box > img{width: 817px; height: 366px; margin: 0 auto; display: block; text-align: center; padding-bottom: 79px;} #tec-power .area3{text-align: center;} #tec-power .area3 .title .bg-text > h3{left: 23%;} #tec-power .area3 > img{margin: 61px 0 80px;} #tec-power .area4{background: url("../images/course-construction/tec-power/area3-bg.png")no-repeat center center; height: 520px; text-align: center; min-width:1350px} #tec-power .area4 .title{margin: 37px 0 10px;} #tec-power .area4 .title .bg-text > h3{left: 17%;} #tec-power .area4 .part4-1 > ul{width: 1200px; height:440px; margin: 0 auto; -webkit-box-shadow: 0px 0px 15px 0px rgba(11, 159, 222, 0.15); box-shadow: 0px 0px 15px 0px rgba(11, 159, 222, 0.15); border-radius: 10px; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 72px 80px;} #tec-power .area4 .part4-1 > ul > li{float: left; text-align:center; width: 160px; margin:0 30px 60px} #tec-power .area4 .part4-1 > ul > li:first-of-type{margin-left: 0px;} #tec-power .area4 .part4-1 > ul > li:nth-of-type(6n){margin-left: 0px;} #tec-power .area4 .part4-1 > ul > li:nth-of-type(5n){margin-right: 0px;} #tec-power .area4 .part4-1 > ul > li > h3{font-size: 16px; color:#0066ff;} #tec-power .area4 .part4-1 > ul > li > .part4-pic{width:70px;height:70px;margin: 0 auto 30px;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic1{background: url("../images/course-construction/tec-power/icon-1.png")no-repeat center center;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic2{background: url("../images/course-construction/tec-power/icon-2.png")no-repeat center center;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic3{background: url("../images/course-construction/tec-power/icon-3.png")no-repeat center center;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic4{background: url("../images/course-construction/tec-power/icon-4.png")no-repeat center center;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic5{background: url("../images/course-construction/tec-power/icon-5.png")no-repeat center center;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic6{background: url("../images/course-construction/tec-power/icon-6.png")no-repeat center center;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic7{background: url("../images/course-construction/tec-power/icon-7.png")no-repeat center center;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic8{background: url("../images/course-construction/tec-power/icon-8.png")no-repeat center center;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic9{background: url("../images/course-construction/tec-power/icon-9.png")no-repeat center center;} #tec-power .area4 .part4-1 > ul > li > .part4-pic.pic10{background: url("../images/course-construction/tec-power/icon-10.png")no-repeat center center;} #tec-power .area5{padding-bottom: 70px; height: 500px;} #tec-power .area5 .title{margin-top: 70px; margin-bottom: 30px;} #tec-power .part5-1 {margin-bottom: 80px;} #tec-power .part5-1 li{width:285px;height: 271px; margin-right:20px;float: left;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;transition: all ease-in-out .3s;} #tec-power .part5-1 li:nth-of-type(4n){margin-right: 0px;} #tec-power .part5-1 li:hover{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)} #tec-power .part5-1 .layer{width: 285px; height: 200px; background-size: cover;} #tec-power .part5-1 .layer .mask{width: 100%; height: 100%; background-color:rgba(0, 0, 0, 0.2);position: relative; cursor:pointer} #tec-power .part5-1 .layer .mask > img{position: absolute; left: 0;top:0;right:0; bottom:0; margin:auto} #tec-power .part5-1 li .content{width: 100%; -webkit-box-sizing:border-box; box-sizing:border-box; padding: 16px 15px; text-align: left; border:1px solid #eee} #tec-power .part5-1 li .content > h3{font-size: 16px; margin-bottom: 10px;} #tec-power .part5-1 li .content > p{font-size:14px;color:#666666;} #tec-power .part5-1 .layer.pic1{background: url("../images/course-construction/tec-power/video1.png")no-repeat center center; } #tec-power .part5-1 .layer.pic2{background: url("../images/course-construction/tec-power/video2.png")no-repeat center center; } #tec-power .part5-1 .layer.pic3{background: url("../images/course-construction/tec-power/video3.png")no-repeat center center; } #tec-power .part5-1 .layer.pic4{background: url("../images/course-construction/tec-power/video4.png")no-repeat center center; } #tec-power .video-area{position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: auto; background: rgba(0, 0, 0, .6); display: none;} #tec-power .video-area > video{position: fixed; left: 50%; top: 50%; margin-left: -400px; margin-top: -300px; width: 800px; height: 600px; } #tec-power .video-area > .close-btn{position: fixed; right: 30px; top: 30px; width: 60px; height: 60px; background: url("../images/course-construction/tec-power/video-close-btn.png") no-repeat center center; cursor:pointer} /* 教学能力大赛end */ /* 产品和解决方案主页 */ .w-1200{width: 1200px; margin: 0 auto;} .product-wrap{ line-height: 1; background-color: #FBFBFB; min-width:1350px;padding-bottom: 60px;} .product-wrap .inner{width: 1200px; margin: 0 auto;} .product-wrap .banner{text-align: center; height: 360px;background: url(../images/product/product-banner.png) no-repeat center;} .product-wrap .banner h1{font-size: 46px; color: #fff;font-weight: normal; padding-top: 118px;} .product-wrap .banner p{font-size: 24px; color: #fff; font-weight: 200; text-transform: uppercase; margin-top: 18px;} .product-wrap .cont-wrap{margin-top: 60px; } .product-wrap .nav{height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box;border-bottom: 1px solid #EEEEEE; background-color: #fff;position: absolute;width: 100%;z-index: 999;} .product-wrap .nav.sticky{position: fixed;top: 0;} /* .product-wrap .nav ul{padding-left: 130px;} */ .product-wrap .nav li{float: left; line-height: 60px; color: #666; padding: 0 10px;margin-left: 96px; position: relative;cursor: pointer;} .product-wrap .nav li a{font-size: 18px; color: #666;} .product-wrap .nav li:hover a{color: #c7403b;} .product-wrap .nav li.active a{ color: #c7403b; font-weight: bold;} .product-wrap .nav li.active::after{content: ""; display: block; width: 100%; height: 2px; background-color: #c7403b; position: absolute; bottom: 1px; left: 0;} .product-wrap .area .title{font-size: 32px; padding-top: 70px; text-align: center; padding-bottom: 10px;} .product-wrap .area li{width: 279px; height: 240px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #EEEEEE; border-radius: 5px; float: left;margin: 28px 28px 0 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s;background-color: #fff;} .product-wrap .area li.medal{background: url(../images/product/medal-gray.png) no-repeat 245px 10px #fff;} .product-wrap .area li:nth-of-type(4n){margin-right: 0;} .product-wrap .area li a{display: block; width: 100%; height: 100%; text-align: center;} .product-wrap .area li:hover{border-color: #c7403b; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px);} .product-wrap .area li.medal:hover{background-image: url(../images/product/medal-red.png);} .product-wrap .area li i{display: inline-block; width: 100px; height: 100px; margin-top: 20px; margin-bottom: 6px;} .product-wrap .area li h1{font-size: 16px; font-weight: normal;} .product-wrap .area li p{font-size: 14px; color: #666; line-height: 20px; margin-top: 16px; width: 182px; display: inline-block;} .product-wrap .area li i{background: url(../images/product/product-icons.png) no-repeat;} .product-wrap .area li i.icon1-1{background-position: -10px -1002px;} .product-wrap .area li i.icon1-2{background-position: -10px -1822px;} .product-wrap .area li i.icon1-3{background-position: -7px -1117px;} .product-wrap .area li i.icon1-4{background-position: -10px -767px;} .product-wrap .area li i.icon1-5{background-position: -10px -1466px;} .product-wrap .area li i.icon1-6{background-position: -3px -1584px;} .product-wrap .area li i.icon1-7{background-position: -17px -1234px;} .product-wrap .area li i.icon2-1{background: url(../images/product/icon/2-1.png) center no-repeat;} .product-wrap .area li i.icon2-2{background-position: -3px -3px;} .product-wrap .area li i.icon2-3{background-position: -10px -1702px;} .product-wrap .area li i.icon2-4{background: url(../images/product/icon/2-4.png) center no-repeat;} .product-wrap .area li i.icon2-5{background-position: -9px -329px} .product-wrap .area li i.icon2-6{background-position: -3px -441px} .product-wrap .area li i.icon3-1{background: url(../images/product/icon/3-1.png) center no-repeat;} .product-wrap .area li i.icon3-2{background-position: -3px -552px;} .product-wrap .area li i.icon3-3{background-position: -9px -664px;} .product-wrap .area li i.icon3-4{background-position: -12px -112px;} .product-wrap .area li i.icon4-1{background: url(../images/product/icon/4-1.png) center no-repeat;} .product-wrap .area li i.icon4-2{background: url(../images/product/icon/4-2.png) center no-repeat;} .product-wrap .area li i.icon5-1{background: url(../images/product/icon/5-1.png) center no-repeat;} /* 产品和解决方案主页 end*/ /* 混合教学平台 */ .teach-plat-wrap{ height: 3367px;line-height: 1; margin-top: -80px;} .teach-plat-wrap .inner{width: 1200px; margin: 0 auto;} .teach-plat-wrap .banner{ background: url(../images/product/teach-platform-banner.png) no-repeat center; height: 600px; text-align: center; color: #fff;min-width: 1350px;} .teach-plat-wrap .banner h1{font-size: 60px; font-weight: normal; padding-top: 210px;} .teach-plat-wrap .banner p{ font-size: 24px; font-weight: 200; margin-top: 38px; margin-bottom: 90px;} .teach-plat-wrap .banner a{border: 2px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 18px; font-weight: 200;display: inline-block; width: 180px; height: 50px; transition: .3s; line-height: 46px; border-radius: 25px;background-color: #fff; color: #117afd;} .teach-plat-wrap .banner a:hover{background-color: #117afd; color: #fff;} .teach-plat-wrap .area-wrap{ background: url(../images/product/teach-plat-bg.png) no-repeat center top; min-width:1350px;} .teach-plat-wrap .area-wrap .img-area{width: 50%; position: relative;} .teach-plat-wrap .area-wrap .content-area{width: 50%;} .teach-plat-wrap .area-wrap .part-1{padding-top: 79px; height: 380px;} .teach-plat-wrap .area-wrap .part-1 h1{font-size: 30px;margin-top: 38px;} .teach-plat-wrap .area-wrap .part-1 h2{font-size: 30px; font-weight: 200;color: #b3c1fe;margin-top: 20px;} .teach-plat-wrap .area-wrap .part-1 p{margin-top: 40px; font-size: 16px; line-height: 34px;} .teach-plat-wrap .area-wrap .part-1 img,.teach-plat-wrap .area-wrap .part-2 img{position: absolute;top: 0; right: 0; } .teach-plat-wrap .area-wrap .part-2{margin-top: 158px; height: 430px;} .teach-plat-wrap .content-area .part-icon{width: 64px; height: 64px; background: url(../images/product/teach/area1-icon.png) no-repeat center left;} .teach-plat-wrap .content-area .area-title{font-size: 30px; font-weight: 200;color: #2953ff; margin-top: 5px; margin-bottom: 35px;} .teach-plat-wrap .content-area .area-cont-item{font-size: 16px; line-height: 24px;position: relative; padding-left: 18px; margin-bottom: 15px;width: 470px;} .teach-plat-wrap .content-area .area-cont-item::before{content: ""; display: block;width: 5px; height: 5px; border-radius: 50%; background-color: #333; position: absolute; top: 10px; left: 0;} .teach-plat-wrap .area-wrap .part-2 .content-area{margin-top: 20px;} .teach-plat-wrap .area-wrap .part-3 {margin-top: 143px; height: 400px;} .teach-plat-wrap .part-3 .content-area{padding-left: 60px; padding-top: 70px;} .teach-plat-wrap .part-3 .content-area .part-icon{background-image: url(../images/product/teach/area2-icon.png);} .teach-plat-wrap .part-3 .img-area::before{content: ""; width: 123px; height: 123px;border-radius: 8px; background-color: #F0EFFF;position: absolute; left: -16px; bottom: -27px;z-index: -1;} .teach-plat-wrap .part-4 .content-area .part-icon{background-image: url(../images/product/teach/area3-icon.png);} .teach-plat-wrap .part-4{margin-top: 200px; height: 530px;} .teach-plat-wrap .part-4 .img-area img{position: absolute; top: 0; right: 0;} .teach-plat-wrap .part-4 .area-cont-item{width: 506px;} .teach-plat-wrap .part-4 .content-area{ margin-top: 10px;} .teach-plat-wrap .part-5{height: 447px; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #ECECEC; background-color: #fff;} .teach-plat-wrap .part-5 .inner{height: 100%;} .teach-plat-wrap .part-5 .cont{width: 421px; border-right: 1px solid #ECECEC; height: 100%; float: left;-webkit-box-sizing: border-box;box-sizing: border-box;} .teach-plat-wrap .part-5 .item2{width: 388px;} .teach-plat-wrap .part-5 .item3{width: 388px;} .teach-plat-wrap .part-5 .item1{background: url(../images/product/teach/part5-icon.png) no-repeat center left;} .teach-plat-wrap .part-5 .item1 h1{font-size: 30px;margin-top: 48px;} .teach-plat-wrap .part-5 .item1 p{line-height: 34px; font-size: 24px; color: #666; font-weight: 200; margin-top: 40px; width: 340px;} .teach-plat-wrap .part-5 .item2{background: url(../images/product/teach/part5-img1.png) no-repeat 63px 80px; padding: 0 25px;} .teach-plat-wrap .part-5 .item3{background: url(../images/product/teach/part5-img2.png) no-repeat 63px 80px;padding: 0 25px;} .teach-plat-wrap .part-5 .item2 h1, .teach-plat-wrap .part-5 .item3 h1{ font-size: 18px; margin-top: 310px; font-weight: normal; } .teach-plat-wrap .part-5 .item2 p, .teach-plat-wrap .part-5 .item3 p{line-height: 26px; font-size: 14px; color: #666; text-align: justify; margin-top: 14px;} .product-header .header-content{ z-index: 99; } .product-header #nav > li {padding:0px 23px;} .product-header #nav > li > a{color: #fff; transition: .3s;-webkit-transition: .3s;} .slide-up-delay-1 a{display:block;height:100%;} /* 动画 */ /* 1.定义初始动画 */ /* 向上淡入 */ .slide-up-delay-0{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out;} .slide-up-delay-1{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out .1s; -o-transition: all .6s ease-in-out .1s; transition: all .6s ease-in-out .1s;} .slide-up-delay-2{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out .2s; -o-transition: all .6s ease-in-out .2s; transition: all .6s ease-in-out .2s;} .slide-up-delay-3{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out .3s; -o-transition: all .6s ease-in-out .3s; transition: all .6s ease-in-out .3s;} .slide-up-delay-4{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out .4s; -o-transition: all .6s ease-in-out .4s; transition: all .6s ease-in-out .4s;} .slide-up-delay-5{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out .5s; -o-transition: all .6s ease-in-out .5s; transition: all .6s ease-in-out .5s;} .slide-up-delay-6{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out .6s; -o-transition: all .6s ease-in-out .6s; transition: all .6s ease-in-out .6s;} .slide-up-delay-7{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out .7s; -o-transition: all .6s ease-in-out .7s; transition: all .6s ease-in-out .7s;} .slide-up-delay-8{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out .8s; -o-transition: all .6s ease-in-out .8s; transition: all .6s ease-in-out .8s;} .slide-up-delay-9{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out .9s; -o-transition: all .6s ease-in-out .9s; transition: all .6s ease-in-out .9s;} .slide-up-delay-10{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; transition: all .6s ease-in-out 1s;} .slide-up-delay-11{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out 1.1s; -o-transition: all .6s ease-in-out 1.1s; transition: all .6s ease-in-out 1.1s;} .slide-up-delay-12{opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all .6s ease-in-out 1.2s; -o-transition: all .6s ease-in-out 1.2s; transition: all .6s ease-in-out 1.2s;} /* 向下淡入 */ .slide-down-delay-0{opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out;} .slide-down-delay-1{opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all .6s ease-in-out .1s; -o-transition: all .6s ease-in-out .1s; transition: all .6s ease-in-out .1s;} .slide-down-delay-2{opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all .6s ease-in-out .2s; -o-transition: all .6s ease-in-out .2s; transition: all .6s ease-in-out .2s;} .slide-down-delay-3{opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all .6s ease-in-out .3s; -o-transition: all .6s ease-in-out .3s; transition: all .6s ease-in-out .3s;} .slide-down-delay-4{opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all .6s ease-in-out .4s; -o-transition: all .6s ease-in-out .4s; transition: all .6s ease-in-out .4s;} .slide-down-delay-5{opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all .6s ease-in-out .5s; -o-transition: all .6s ease-in-out .5s; transition: all .6s ease-in-out .5s;} .slide-down-delay-6{opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all .6s ease-in-out .6s; -o-transition: all .6s ease-in-out .6s; transition: all .6s ease-in-out .6s;} .slide-down-delay-7{opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all .6s ease-in-out .7s; -o-transition: all .6s ease-in-out .7s; transition: all .6s ease-in-out .7s;} .slide-down-delay-8{opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all .6s ease-in-out .8s; -o-transition: all .6s ease-in-out .8s; transition: all .6s ease-in-out .8s;} /* 向左淡入 */ .slide-left-delay-0{opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out;} .slide-left-delay-1{opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .6s ease-in-out .1s; -o-transition: all .6s ease-in-out .1s; transition: all .6s ease-in-out .1s;} .slide-left-delay-2{opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .6s ease-in-out .2s; -o-transition: all .6s ease-in-out .2s; transition: all .6s ease-in-out .2s;} .slide-left-delay-3{opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .6s ease-in-out .3s; -o-transition: all .6s ease-in-out .3s; transition: all .6s ease-in-out .3s;} .slide-left-delay-4{opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .6s ease-in-out .4s; -o-transition: all .6s ease-in-out .4s; transition: all .6s ease-in-out .4s;} .slide-left-delay-5{opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .6s ease-in-out .5s; -o-transition: all .6s ease-in-out .5s; transition: all .6s ease-in-out .5s;} .slide-left-delay-6{opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .6s ease-in-out .6s; -o-transition: all .6s ease-in-out .6s; transition: all .6s ease-in-out .6s;} .slide-left-delay-7{opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .6s ease-in-out .7s; -o-transition: all .6s ease-in-out .7s; transition: all .6s ease-in-out .7s;} .slide-left-delay-8{opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .6s ease-in-out .8s; -o-transition: all .6s ease-in-out .8s; transition: all .6s ease-in-out .8s;} /* 向右淡入 */ .slide-right-delay-0{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out;-o-transition: all .6s ease-in-out;transition: all .6s ease-in-out;} .slide-right-delay-1{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out .1s;-o-transition: all .6s ease-in-out .1s;transition: all .6s ease-in-out .1s;} .slide-right-delay-2{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out .2s;-o-transition: all .6s ease-in-out .2s;transition: all .6s ease-in-out .2s;} .slide-right-delay-3{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out .3s;-o-transition: all .6s ease-in-out .3s;transition: all .6s ease-in-out .3s;} .slide-right-delay-4{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out .4s;-o-transition: all .6s ease-in-out .4s;transition: all .6s ease-in-out .4s;} .slide-right-delay-5{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out .5s;-o-transition: all .6s ease-in-out .5s;transition: all .6s ease-in-out .5s;} .slide-right-delay-6{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out .6s;-o-transition: all .6s ease-in-out .6s;transition: all .6s ease-in-out .6s;} .slide-right-delay-7{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out .7s;-o-transition: all .6s ease-in-out .7s;transition: all .6s ease-in-out .7s;} .slide-right-delay-8{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out .8s;-o-transition: all .6s ease-in-out .8s;transition: all .6s ease-in-out .8s;} .slide-right-delay-9{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out .9s;-o-transition: all .6s ease-in-out .9s;transition: all .6s ease-in-out .9s;} .slide-right-delay-10{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out 1s;-o-transition: all .6s ease-in-out 1s;transition: all .6s ease-in-out 1s;} .slide-right-delay-11{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out 1.1s;-o-transition: all .6s ease-in-out 1.1s;transition: all .6s ease-in-out 1.1s;} .slide-right-delay-12{opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);-webkit-transition: all .6s ease-in-out 1.2s;-o-transition: all .6s ease-in-out 1.2s;transition: all .6s ease-in-out 1.2s;} /* 扩大 */ .grow-up-delay-0{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out ; -o-transition: all .6s ease-in-out ; transition: all .6s ease-in-out ;} .grow-up-delay-1{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out .1s; -o-transition: all .6s ease-in-out .1s; transition: all .6s ease-in-out .1s;} .grow-up-delay-2{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out .2s; -o-transition: all .6s ease-in-out .2s; transition: all .6s ease-in-out .2s;} .grow-up-delay-3{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out .3s; -o-transition: all .6s ease-in-out .3s; transition: all .6s ease-in-out .3s;} .grow-up-delay-4{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out .4s; -o-transition: all .6s ease-in-out .4s; transition: all .6s ease-in-out .4s;} .grow-up-delay-5{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out .5s; -o-transition: all .6s ease-in-out .5s; transition: all .6s ease-in-out .5s;} .grow-up-delay-6{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out .6s; -o-transition: all .6s ease-in-out .6s; transition: all .6s ease-in-out .6s;} .grow-up-delay-7{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out .7s; -o-transition: all .6s ease-in-out .7s; transition: all .6s ease-in-out .7s;} .grow-up-delay-8{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out .8s; -o-transition: all .6s ease-in-out .8s; transition: all .6s ease-in-out .8s;} .grow-up-delay-9{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out .9s; -o-transition: all .6s ease-in-out .9s; transition: all .6s ease-in-out .9s;} .grow-up-delay-10{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; transition: all .6s ease-in-out 1s;} .grow-up-delay-11{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out 1.1s; -o-transition: all .6s ease-in-out 1.1s; transition: all .6s ease-in-out 1.1s;} .grow-up-delay-12{opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .6s ease-in-out 1.2s; -o-transition: all .6s ease-in-out 1.2s; transition: all .6s ease-in-out 1.2s;} /* 2.定义过渡动画 */ .transform-area.show .slide-up-delay-0, .transform-area.show .slide-up-delay-1, .transform-area.show .slide-up-delay-2, .transform-area.show .slide-up-delay-3, .transform-area.show .slide-up-delay-4, .transform-area.show .slide-up-delay-5, .transform-area.show .slide-up-delay-6, .transform-area.show .slide-up-delay-7, .transform-area.show .slide-up-delay-8, .transform-area.show .slide-up-delay-9, .transform-area.show .slide-up-delay-10, .transform-area.show .slide-up-delay-11, .transform-area.show .slide-up-delay-12, .transform-area.show .slide-down-delay-0, .transform-area.show .slide-down-delay-1, .transform-area.show .slide-down-delay-2, .transform-area.show .slide-down-delay-3, .transform-area.show .slide-down-delay-4, .transform-area.show .slide-down-delay-5, .transform-area.show .slide-down-delay-6, .transform-area.show .slide-down-delay-7, .transform-area.show .slide-down-delay-8, .transform-area.show .slide-left-delay-0, .transform-area.show .slide-left-delay-1, .transform-area.show .slide-left-delay-2, .transform-area.show .slide-left-delay-3, .transform-area.show .slide-left-delay-4, .transform-area.show .slide-left-delay-5, .transform-area.show .slide-left-delay-6, .transform-area.show .slide-left-delay-7, .transform-area.show .slide-left-delay-8, .transform-area.show .slide-right-delay-0, .transform-area.show .slide-right-delay-1, .transform-area.show .slide-right-delay-2, .transform-area.show .slide-right-delay-3, .transform-area.show .slide-right-delay-4, .transform-area.show .slide-right-delay-5, .transform-area.show .slide-right-delay-6, .transform-area.show .slide-right-delay-7, .transform-area.show .slide-right-delay-8, .transform-area.show .slide-right-delay-9, .transform-area.show .slide-right-delay-10, .transform-area.show .slide-right-delay-11, .transform-area.show .slide-right-delay-12{ opacity: 1; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); } .transform-area.show .grow-up-delay-0, .transform-area.show .grow-up-delay-1, .transform-area.show .grow-up-delay-2, .transform-area.show .grow-up-delay-3, .transform-area.show .grow-up-delay-4, .transform-area.show .grow-up-delay-5, .transform-area.show .grow-up-delay-6, .transform-area.show .grow-up-delay-7, .transform-area.show .grow-up-delay-8, .transform-area.show .grow-up-delay-9, .transform-area.show .grow-up-delay-10, .transform-area.show .grow-up-delay-11, .transform-area.show .grow-up-delay-12{ opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* 智能智课系统 */ .product-banner{ background: url(../images/product/teach-platform-banner.png) no-repeat center; height: 600px; text-align: center; color: #fff; min-width:1350px} .product-banner h1{font-size: 60px; font-weight: normal; padding-top: 210px;} .product-banner p{ font-size: 24px; font-weight: 200; margin-top: 38px; margin-bottom: 90px;} .product-banner a{border: 2px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 18px; font-weight: 200;display: inline-block; width: 180px; height: 50px; line-height: 46px; border-radius: 25px;background-color: #fff; color: #117afd;-webkit-transition: .3s;-o-transition: .3s;transition: .3s;} .product-banner a:hover{background-color: #117afd; color: #fff;} .scene-wrap{ line-height: 1; background: url(../images/product/scene-bg.png) no-repeat center 670px #fff;margin-top: -80px; min-width:1350px;} .scene-wrap .title-box{position: relative; height: 106px; background: url(../images/product/introduce.png) no-repeat center left; margin-top: 40px;} .scene-wrap .title{font-size: 32px; padding-left: 19px; line-height: 29px; position: absolute; top: 40px; left: 0;} .scene-wrap .title::before{content: ""; position: absolute; height: 32px; width: 3px; left: 0; top: 0; background-color: #2C68FF;} .scene-wrap .en-title{font-size: 93px;} .scene-wrap .img-area{width: 50%; position: relative;} .scene-wrap .content-area{width: 50%; position: relative;} .scene-wrap .content-area h1{font-size: 32px; margin-bottom: 40px;position: relative; font-weight: bold; z-index: 99;font-style: italic;} .scene-wrap .content-area .r-icon{z-index: -1; position: absolute; width: 82px; height: 82px; border-radius: 50%; background: url(../images/product/l-round.png) no-repeat center; left: -35px; top: -35px; } .scene-wrap .content-area p{font-size: 18px; margin-bottom: 18px;font-style: italic;} .scene-wrap .part-1 .display-r-st{height: 425px; margin-top: 83px;} .scene-wrap .part-1 .img-area img{position: absolute; top: 0; left: 118px;} .scene-wrap .part-1 .content-area{padding-left: 11px; margin-top: 105px;} .scene-wrap .part-2{margin-top: 20px;margin-bottom: 140px;} .scene-wrap .part-2 .content-area{padding-left: 105px;padding-top: 65px;-webkit-box-sizing: border-box;box-sizing: border-box;} .scene-wrap .part-3 .img-area img{position: absolute; left: 20px; top: 0;} .scene-wrap .part-3{height: 300px;} .scene-wrap .part-3 .content-area{padding-top: 80px;padding-left: 5px;} .scene-wrap .part-4{margin-top: 110px;height: 412px;} .scene-wrap .part-4 .content-area{-webkit-box-sizing: border-box;box-sizing: border-box;padding-left: 170px;padding-top: 87px;} .scene-wrap .part-4 .img-area img{position: absolute; top: 0; right: 70px;} .scene-wrap .use-scene .title-box{background-image: url(../images/product/scene.png);} .scene-wrap .use-scene{height: 580px; background-color: #F7F9FF; overflow: hidden;} .scene-wrap .use-scene li{float: left; width: 360px;height: 325px;padding: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: 10px;-webkit-box-shadow: 0 0 10px rgba(44, 104, 255, 0.2);box-shadow: 0 0 10px rgba(44, 104, 255, 0.2);} .scene-wrap .use-scene li~li{margin-left: 59px;} .scene-wrap .use-scene li img{width: 340px;height: 125px;border-radius: 10px;} .scene-wrap .use-scene li .name{position: relative; text-align: center;font-size: 22px; font-weight: bold; color: #2c68ff; line-height: 32px; background: url(../images/product/use-scene-1.png) no-repeat 130px 18px;padding: 13px 0 13px 40px; margin-bottom: 12px;} .scene-wrap .use-scene li .name::after{content: ""; position: absolute; bottom: 0; left: 50%; width: 30px; height: 2px;background-color: #2C68FF;margin-left: -15px;} .scene-wrap .use-scene li .name i{height: 32px; width: 30px;display: inline-block; background: url(../images/product/use-scene-1.png) no-repeat center;vertical-align: middle;margin-right: 10px;} .scene-wrap .use-scene li p{font-size: 16px; line-height: 30px;} .scene-wrap .use-scene li:nth-of-type(2) .name{background-image: url(../images/product/use-scene-2.png);} .scene-wrap .use-scene li:nth-of-type(3) .name{background-image: url(../images/product/use-scene-3.png); background-position: 100px 18px;} .scene-wrap .part-3 .content-area p,.scene-wrap .part-4 .content-area p{line-height: 36px;} .scene-wrap .use-scene .title-box{margin: 48px 0 20px 0;} .scene-wrap .product-banner{background-image: url(../images/product/smart-scene-banner.png);} /* 考试系统 */ .test-sys-wrap{margin-top:-80px;} .test-sys-wrap .product-banner{background-image: url(../images/product/test/test-banner.png);} .test-sys-wrap .area-wrap{min-width:1350px} .test-sys-wrap .area-wrap .img-area{width: 50%; position: relative;} .test-sys-wrap .area-wrap .content-area{width: 50%;} .test-sys-wrap .area-wrap .part-1{padding-top: 87px; height: 380px;} .test-sys-wrap .area-wrap .part-1 h1{font-size: 30px;margin-top: 80px;} .test-sys-wrap .area-wrap .part-1 p{margin-top: 40px; font-size: 16px; line-height: 34px;} .test-sys-wrap .area-wrap .part-2 img:nth-of-type(1){position: absolute;top: 0; right: 5px; } .test-sys-wrap .area-wrap .part-2 img:nth-of-type(2){position: absolute;top: -40px; right: -20px; } .test-sys-wrap .area-wrap .part-2 img:nth-of-type(3){position: absolute;top: 305px;left: 9px;} .test-sys-wrap .area-wrap .part1-wrap{height: 470px; background: url(../images/product/test/part1-bg.png) no-repeat center;} .test-sys-wrap .area-wrap .part-1 img{top: 0; left: 0;} .test-sys-wrap .area-wrap .c-title{position: absolute; text-align: center;font-size: 30px; font-weight: bold; top: -120px; left: 50%; margin-left: -60px;} .test-sys-wrap .area-wrap .part-2{margin-top: 195px; height: 430px; position: relative;} .test-sys-wrap .content-area .area-title{font-size: 26px; margin-top: 5px; margin-bottom: 35px;} .test-sys-wrap .content-area .area-cont-item{font-size: 16px; line-height: 24px;position: relative; padding-left: 22px; margin-bottom: 15px;width: 470px;} .test-sys-wrap .content-area .area-cont-item::before{content: ""; display: block;width: 5px; height: 5px; border-radius: 50%; background-color: #333; position: absolute; top: 10px; left: 5px;} .test-sys-wrap .area-wrap .part-2 .content-area{margin-top: 40px;} .test-sys-wrap .area-wrap .part-3 {margin-top: 73px; height: 400px;} .test-sys-wrap .area-wrap .part-3 img{position: absolute;} .test-sys-wrap .area-wrap .part-3 .img-area img:nth-of-type(2){right:47px; bottom: 40px;} .test-sys-wrap .part-3 .content-area{padding-left: 35px; padding-top: 70px;-webkit-box-sizing: border-box;box-sizing: border-box;} .test-sys-wrap .part-4{margin-top: 70px; height: 380px;} .test-sys-wrap .part-4 .img-area img{position: absolute;} .test-sys-wrap .part-4 .img-area img:nth-of-type(1){top: 0; right: -5px;} .test-sys-wrap .part-4 .img-area img:nth-of-type(2){ left: -17px; top: 266px;} .test-sys-wrap .part-4 .area-cont-item{width: 506px;} .test-sys-wrap .part-4 .content-area{ margin-top: 40px;} .test-sys-wrap .part-5{height: 400px; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #ECECEC;border-bottom: 1px solid #ececce; background-color: #fff;} .test-sys-wrap .part-5 .inner{height: 100%;} .test-sys-wrap .part-5 .cont{width: 421px; border-right: 1px solid #ECECEC; height: 100%; float: left;-webkit-box-sizing: border-box;box-sizing: border-box;} .test-sys-wrap .part-5 .item2{width: 388px;} .test-sys-wrap .part-5 .item3{width: 388px;} .test-sys-wrap .part-5 .item1{background: url(../images/product/teach/part5-icon.png) no-repeat center left; height: 398px;} .test-sys-wrap .part-5 .item1 h1{font-size: 30px;margin-top: 48px;} .test-sys-wrap .part-5 .item1 h1::before{content: ""; position: absolute; width: 60px; height: 3px; background-color: #2953FF; top: 48px; left: 0;} .test-sys-wrap .part-5 .item1 p{line-height: 34px; font-size: 24px; color: #666; font-weight: 200; margin-top: 20px; width: 340px;} .test-sys-wrap .part-5 .item2{background: url(../images/product/teach/part5-img1.png) no-repeat 63px 63px; padding: 0 25px;} .test-sys-wrap .part-5 .item3{background: url(../images/product/teach/part5-img2.png) no-repeat 63px 63px;padding: 0 25px;} .test-sys-wrap .part-5 .item2 h1, .test-sys-wrap .part-5 .item3 h1{ font-size: 18px; margin-top: 310px; font-weight: normal; text-align: center; } .test-sys-wrap .part-5 .w-1200{height: 100%;} .test-sys-wrap .part-5 .item2 p, .test-sys-wrap .part-5 .item3 p{line-height: 26px; font-size: 14px; color: #666; text-align: justify; margin-top: 14px;} .test-sys-wrap .area-list .area-cont-item:last-of-type{position: relative;} .test-sys-wrap .area-list .area-cont-item:last-of-type::after{content: ""; display: block; position: absolute; width: 60px;height: 4px; background-color: #147CFD; bottom: -40px; left: 0;} .test-sys-wrap .area-wrap .function{background: url(../images/product/test/background.png) no-repeat center 260px #fff;} /* 站群 */ .site-group-wrap{line-height: 1;margin-top: -80px; min-width:1350px;} .site-group-wrap .product-banner p{font-size: 20px;line-height: 40px;margin-bottom: 60px;} .site-group-wrap .product-banner h1{padding-top: 190px;} .site-group-wrap .product-banner{background-image: url(../images/product/site/banner.png);} .site-group-wrap .part-1{height: 539px;padding-top: 78px;} .site-group-wrap .part-1 .img-box{position: relative; height: 380px;color: #fff;} .site-group-wrap .part-1 .img-box img{position: absolute;} .site-group-wrap .part-1 .img-box img:nth-of-type(1){left: 50%;margin-left: -295px;} .site-group-wrap .part-1 .img-box img:nth-of-type(2){left: 774px; top: 63px;} .site-group-wrap .part-1 .c-title, .site-group-wrap .part-5 .c-title{margin: 0px 0 55px 0; font-size: 30px; font-weight: bold;text-align: center; background: url(../images/product/site/title-bg.png) no-repeat center 12px;} .site-group-wrap .part-1 .left-block{ text-align: center; width: 221px; height: 118px; background: url(../images/product/site/part1-3.png) no-repeat center; position: absolute;left: 94px; top: 31px;} .site-group-wrap .part-1 .left-block .num{font-size: 34px;padding: 10px 0;} .site-group-wrap .part-1 .left-block .text{padding-right: 15px; font-size: 16px; line-height: 24px;} .site-group-wrap .part-1 .right-block{text-align: center; width: 199px; height: 118px; background: url(../images/product/site/part1-4.png) no-repeat center; position: absolute;top: 234px; right: 68px;} .site-group-wrap .part-1 .right-block .text{padding-left: 15px; font-size: 16px; line-height: 24px; padding-top: 60px;} .site-group-wrap .part-2{height: 602px;background-color: #F8FBFF;} .site-group-wrap .area-cont{width: 450px; float: left; margin-top: 200px;} .site-group-wrap .part-title{z-index: 9; font-size: 30px ;color: #006ff9;font-weight: 200;margin-bottom: 40px;position: relative;} .site-group-wrap .part-title i{z-index: -1; position: absolute; height: 58px; width: 77px;left: -32px; top: -28px; background: url(../images/product/site/part-title-bg.png) no-repeat;} .site-group-wrap .area-cont .item{font-size: 16px;margin-bottom: 25px;padding-left: 23px;position: relative;} .site-group-wrap .area-cont .item::before{content: "";display: block; width: 5px; height: 5px;background-color: #333;position: absolute;left: 5px; top: 6px;border-radius: 50%;} .site-group-wrap .part-3 .area-img{float: left;width: 694px;height: 400px; position: relative;} .site-group-wrap .part-3{padding-top: 85px; height: 517px;} .site-group-wrap .part-3 img{position: absolute; left: -15px;} .site-group-wrap .part-3 .area-cont{ margin-top: 140px;} .site-group-wrap .part-4{height: 602px;background-color: #F8FBFF;} .site-group-wrap .part-4 .w-1200{padding-top: 90px;} .site-group-wrap .part-4 .area-cont p{font-size: 16px; line-height: 40px;} .site-group-wrap .part-4 .area-cont{width: 520px;} .site-group-wrap .part-4 .area-img{position: relative;} .site-group-wrap .part-4 .area-img img{position: absolute;right: -15px;} .site-group-wrap .part-5{height: 606px;padding-top: 78px;} .site-group-wrap .part-5 li{-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 117px; width: 370px; height: 198px; border-radius: 10px; float: left;-webkit-box-shadow: 0 0 20px rgba(0, 111, 249, .1);box-shadow: 0 0 20px rgba(0, 111, 249, .1); margin-bottom: 44px;text-align: center;font-size: 20px;color: #0f5aff;line-height: 30px;background-repeat: no-repeat;background-position: center 40px;} .site-group-wrap .part-5 li ~ li{margin-left: 42px;} .site-group-wrap .part-5 li:nth-of-type(1){background-image: url(../images/product/site/icon-1.png);} .site-group-wrap .part-5 li:nth-of-type(2){background-image: url(../images/product/site/icon-2.png);} .site-group-wrap .part-5 li:nth-of-type(3){background-image: url(../images/product/site/icon-3.png);} .site-group-wrap .part-5 li:nth-of-type(4){background-image: url(../images/product/site/icon-4.png);margin-left: 205px;} .site-group-wrap .part-5 li:nth-of-type(5){background-image: url(../images/product/site/icon-5.png);} .site-group-wrap .swiper-container{width: 679px;height: 437px; float: right; margin: 82px 17px 0 0;} .site-group-wrap .part-2 .slide-wrap{height: 602px; width: 710px; float: right; position: relative;} .site-pagination {position: absolute;z-index: 20; bottom: 70px; width: 100%;text-align: center;} .site-pagination .swiper-pagination-switch {display: inline-block;width: 9px;height: 9px;border-radius: 8px;background: #C6DFFE;margin: 0 5px;opacity: 0.8;border: 1px solid #fff;cursor: pointer; } .site-pagination .swiper-active-switch { background: #006FF9;} .site-group-wrap .prev-btn,.site-group-wrap .next-btn{width: 40px; height: 45px; position: absolute; background-color: pink;z-index: 99; cursor: pointer;} .site-group-wrap .prev-btn{top: 270px; left: -10px; background: url(../images/product/site/arrow-left.png) no-repeat center;} .site-group-wrap .next-btn{top: 270px; right: -7px;background: url(../images/product/site/arrow-right.png) no-repeat center;} .site-group-wrap .slide-wrap .slide-num{position: absolute; font-size: 130px; color: #ebf2ff;font-weight: bold; right: -80px;top: 20px;} /* 实验室安全平台 */ .lib-plat-wrap{line-height: 1; margin-top: -80px; min-width:1350px} .lib-plat-wrap .product-banner{background-image: url(../images/product/lab/banner.png);} .lib-plat-wrap .part-1{text-align: center;} .lib-plat-wrap .title{font-size: 30px; padding-top: 80px; padding-bottom: 50px;} .lib-plat-wrap .part-1 .info{font-size: 16px;line-height: 34px;} .lib-plat-wrap .part-1 .data{width: 550px; margin: 0 auto;height: 129px;margin-top: 35px;} .lib-plat-wrap .part-1 .data .item{width: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; float: left;height: 100%;} .lib-plat-wrap .part-1 .data .item:first-of-type{border-right: 1px solid #eeeeee;} .lib-plat-wrap .part-1 .data .item p{font-size: 40px; color: #15CF6D; margin-top: 19px;margin-bottom: 28px;} .lib-plat-wrap .part-1 .data .item span{font-size: 20px; color: #999;} .lib-plat-wrap .part-2{position: relative; height: 440px; margin-top: 154px; margin-bottom: 196px;} .lib-plat-wrap .part-2 img{position: absolute; left: 289px;z-index: -1 ;} .lib-plat-wrap .part-2 li{cursor: pointer; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; overflow: hidden; float: left; width: 356px; height: 118px;-webkit-box-shadow: 0 0 30px 0 rgba(51, 51, 51, .1);box-shadow: 0 0 30px 0 rgba(51, 51, 51, .1); border-radius: 10px; margin-top: 20px;background-color: #fff;} .lib-plat-wrap .part-2 li:nth-of-type(2n){margin-left: 488px;} .lib-plat-wrap .part-2 li .icon{ display: inline-block; width: 42px; height: 42px; border-radius: 50%;margin-top: 17px;background: url(../images/product/lab/icons.png) no-repeat -2px 0px #E7FAF0;} .lib-plat-wrap .part-2 li .text{font-size: 20px; margin-top: 14px;} .lib-plat-wrap .part-2 li:nth-of-type(1) .icon{background: url(../images/product/lab/icon1.png) no-repeat center #E7FAF0; } .lib-plat-wrap .part-2 li:nth-of-type(2) .icon{background-position: 2px -37px;} .lib-plat-wrap .part-2 li:nth-of-type(3) .icon{background-position: -2px 1px;} .lib-plat-wrap .part-2 li:nth-of-type(4) .icon{background-position: 3px -117px;} .lib-plat-wrap .part-2 li:nth-of-type(5) .icon{background-position: 0 -76px;} .lib-plat-wrap .part-2 li:nth-of-type(6) .icon{background-position: 2px -157px;} .lib-plat-wrap .part-2 li:nth-of-type(2) p{padding-top: 35px;} .lib-plat-wrap .part-2 li:nth-of-type(4) p{padding-top: 10px;} .lib-plat-wrap .part-2 li:nth-of-type(6) p{padding-top: 10px;} .lib-plat-wrap .part-2 li p{display: none; background-color: #15CF6D; color: #fff;width: 100%;height: 100%;position: absolute;top: 0;left: 0; padding: 12px;-webkit-box-sizing: border-box;box-sizing: border-box; line-height: 24px; font-size: 14px; text-align: left; padding-top: 20px;} .lib-plat-wrap .part-3{text-align: center; height:760px; position: relative;} .lib-plat-wrap .part-3 .title{padding-bottom: 70px;padding-top: 0;} .lib-plat-wrap .part-3 h3{font-weight: 400;font-size: 20px; color: #15CF6D;} .lib-plat-wrap .part-3 img{position: absolute;} .lib-plat-wrap .part-3 img:nth-of-type(1){ left: 217px; top: 150px;} .lib-plat-wrap .part-3 img:nth-of-type(2){ right: 220px; top: 150px;} .lib-plat-wrap .part-3 img:nth-of-type(3){ left: 535px; top: 220px;} .lib-plat-wrap .part-3 img:nth-of-type(4){ left: 535px; top: 380px;} .lib-plat-wrap .part-3 .arr-left, .lib-plat-wrap .part-3 .arr-right{position: absolute; border: 5px solid transparent; border-right-color: #15CF6D;border-right-width: 8px; top: 283px;left:510px;} .lib-plat-wrap .part-3 .arr-right{-webkit-transform: rotateZ(180deg);-ms-transform: rotate(180deg);transform: rotateZ(180deg); left: 685px; top: 445px;} .lib-plat-wrap .content{background: url(../images/product/lab/cont-bg.png) no-repeat center 375px;} /* 资源库 */ .data-lib-wrap{line-height: 1;margin-top: -80px; min-width:1350px} .data-lib-wrap .product-banner{background-image: url(../images/product/data/banner.png);} .data-lib-wrap .part-1{height: 515px; background: url(../images/product/data/part1-bg2.png) no-repeat center;padding-top: 234px;} .data-lib-wrap .c-title{font-size: 32px;font-weight: bold; font-style: italic;position: relative;} .data-lib-wrap .part-1 .c-title{margin-bottom: 31px;} .data-lib-wrap .c-title::after{content: "";position: absolute; width: 150px; height: 5px; background: -webkit-gradient(linear, right top, left top, from(#3998FF), to(#4F69FF)); background: -o-linear-gradient(right, #3998FF 0%, #4F69FF 100%); background: linear-gradient(-90deg, #3998FF 0%, #4F69FF 100%);left: 0; bottom: -20px;} .data-lib-wrap .part-1 p{font-size: 18px;line-height: 36px;font-style: italic;width: 607px;} .data-lib-wrap .part-2{height: 466px;padding-top: 80px;} .data-lib-wrap .part-2 .c-title{text-align: center;} .data-lib-wrap .part-2 .c-title::after{width: 130px; left: 50%;margin-left: -65px;} .data-lib-wrap .part-2 li{margin-left:160px;margin-top: 84px; padding-top: 198px;float: left; width: 382px; height: 270px; -webkit-box-shadow: 0px 0px 10px 0px rgba(57, 152, 255, 0.2); box-shadow: 0px 0px 10px 0px rgba(57, 152, 255, 0.2);border-radius: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 22px; color: #3998FF;text-align: center;} .data-lib-wrap .part-2 li:nth-of-type(1){background: url(../images/product/data/part2-1.png) no-repeat center; margin-left: 138px;} .data-lib-wrap .part-2 li:nth-of-type(2){background: url(../images/product/data/part2-2.png) no-repeat center;} .data-lib-wrap .part-3{height: 500px;padding-top: 162px;-webkit-box-sizing: border-box;box-sizing: border-box; background: url(../images/product/data/part3-bg.png) no-repeat center; overflow: hidden; color: #fff;} .data-lib-wrap .part-3 .w-1200{position: relative;} .data-lib-wrap .part-5 .w-1200{position: relative;} .data-lib-wrap .part-3 .title, .data-lib-wrap .part-4 .title, .data-lib-wrap .part-5 .title{font-size: 32px; font-style: italic;margin-bottom: 30px; font-weight: bold;} .data-lib-wrap .part-3 .item, .data-lib-wrap .part-5 .item, .data-lib-wrap .part-4 .item{font-size: 18px; font-style: italic; padding-left:21px;position: relative;line-height: 36px;} .data-lib-wrap .part-3 .item::after, .data-lib-wrap .part-5 .item::after, .data-lib-wrap .part-4 .item::after{content: ""; position: absolute;width: 4px; height: 4px;background: #fff; left:6px;top: 16px;} .data-lib-wrap .part-4{height: 533px; overflow: hidden;} .data-lib-wrap .part-4 .left{width: 50%;float: left; padding-top: 44px; position: relative;} .data-lib-wrap .part-4 .left img{position: absolute; left: -25px;top: 45px;} .data-lib-wrap .part-4 .right{width: 50%; float: right; padding-top: 151px;-webkit-box-sizing: border-box;box-sizing: border-box; padding-left: 5px;} .data-lib-wrap .part-4 .item::after{background-color: #333;} .data-lib-wrap .part-4 .left p{ text-align: center;font-size: 20px;width: 512px;margin-top: 410px;} .data-lib-wrap .part-5{background: url(../images/product/data/part3-bg.png) no-repeat center; height: 500px; color: #fff;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 162px;} .data-lib-wrap .slide-wrap{height: 500px; width: 626px; position: absolute; top: -162px; right: 0;} .data-lib-wrap .slide-wrap .swiper-container{width: 510px; height: 400px;margin-top: 65px;} .data-lib-wrap .prev-btn,.data-lib-wrap .next-btn{width: 30px; height: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, .5);position: absolute; cursor: pointer;background-repeat: no-repeat;background-position: center;} .data-lib-wrap .prev-btn{background-image: url(../images/product/data/arr-left.png); top: 240px; left: 0;} .data-lib-wrap .next-btn{background-image: url(../images/product/data/arr-right.png); right:0; top: 240px;} .data-lib-wrap .slide-wrap p{font-size: 20px; text-align: center;margin-top: 18px;} .data-lib-wrap .swiper-container{width: 679px;height: 437px; float: right; margin: 82px 55px 0 0; -webkit-perspective: 1200px;-ms-perspective: 1200px;perspective: 1200px;} .data-lib-wrap .swiper-wrapper {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;} .data-lib-wrap .swiper-slide {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;} /* 平台 */ .platform-wrap{ line-height: 1; } .platform-wrap .inner{width: 1200px; margin: 0 auto;} .platform-wrap .banner{text-align: center; height: 360px;background: url(../images/product/product-banner.png) no-repeat center;} .platform-wrap .banner h1{font-size: 46px; color: #fff;font-weight: normal; padding-top: 118px;} .platform-wrap .banner p{font-size: 24px; color: #fff; font-weight: 200; margin-top: 18px;} .platform-wrap .nav{height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box;border-bottom: 1px solid #EEEEEE; background-color: #fff;position: absolute;width: 100%;} .platform-wrap .nav.sticky{position: fixed;top: 0;} .platform-wrap .nav ul{padding-left: 255px;} .platform-wrap .nav li{float: left; line-height: 60px; color: #666; margin-left: 188px; position: relative;} .platform-wrap .nav li a{font-size: 18px; color: #666;} .platform-wrap .nav li:hover a{color: #c7403b;} .platform-wrap .nav li.active a{ color: #c7403b; font-weight: bold;} .platform-wrap .nav li.active::after{content: ""; display: block; width: 100%; height: 2px; background-color: #c7403b; position: absolute; bottom: 1px; left: 0;} .platform-wrap .part-1{height: 702px; text-align: center;} .platform-wrap .part-1 .logo{width: 219px;height: 64px;background: url(../images/platform/suke-logo.png) no-repeat center; margin: 140px auto 0;float: none;} .platform-wrap .card{width: 990px;height: 340px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px;background: #FBFBFB;margin-left: 99px;text-align: left;} .platform-wrap .card .left{width: 465px; float: left;height: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;border-right: 1px solid #E7E7E7;} .platform-wrap .card .right{width: 465px; float: right;height: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;padding-left: 32px;} .platform-wrap .card .right h1{font-size:24px;color: #999; padding-top: 45px;padding-bottom: 24px;} .platform-wrap .card .right p{font-size: 16px; color: #999;line-height: 30px;} .platform-wrap .part-1 > p{font-size: 16px;line-height: 30px;margin: 30px 0 60px;} .platform-wrap .part-2{height: 589px;background: url(../images/platform/part2-bg.png) no-repeat center;} .platform-wrap .part-2 ul {padding-left: 40px;} .platform-wrap .part-2 li{float: left; height: 410px;width: 500px;background: #FFFFFF;-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.33);box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.33);border-radius: 10px; margin-top: 90px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 36px;} .platform-wrap .part-2 li:first-child{margin-left: 40px;} .platform-wrap .part-2 li ~ li{margin-left: 110px;} .platform-wrap .part-2 li .icon{width: 160px;height: 110px;background: url(../images/platform/icon1.png) center no-repeat;display: block; margin: 14px auto 70px;position: relative;} .platform-wrap .txdaxue .part-2 li .icon{margin-bottom: 90px;} .platform-wrap .part-2 li .icon::before{content: ""; position: absolute; width: 45px;height: 3px;background-color: #086AFF;bottom: -30px;left: 60px;} .platform-wrap .part-2 li:nth-of-type(2) .icon{background-image: url(../images/platform/icon2.png);} .platform-wrap .part-2 li p{font-size: 16px;line-height: 30px;} .platform-wrap .part-3{height: 689px;text-align: center;} .platform-wrap .part-3 p{font-size: 16px;padding-top: 81px;} .platform-wrap .part-3 p span{font-size: 30px;color: #c7403b;} .platform-wrap .part-3 .computer{ width: 606px;-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);margin: 52px auto ;} .platform-wrap .part-3 .computer .bar{width: 100%; height: 44px; background-color: #4E4A67;border-radius: 10px 10px 0px 0px;} .platform-wrap .part-3 .computer .window{width: 100%; height: 384px;background-color: #fff; padding: 15px; -webkit-box-sizing: border-box; box-sizing: border-box;} .platform-wrap .txdaxue .part-1 .logo{background: url(../images/platform/txdaxue-logo.png);} .platform-wrap .txdaxue .part-3 p{font-size: 24px;} .platform-wrap .computer li{width: 16px;height: 16px; background: #6C668D; border-radius: 50%; float: left; margin-right: 14px;margin-top: 14px;} .platform-wrap .computer li:first-child{margin-left: 32px;} .platform-wrap .txdaxue{display: none;} /* 企业网校 */ .school-wrap{line-height: 1;margin-top:-80px;} .school-wrap .product-banner{background-image: url(../images/product/school/banner.png);} .school-wrap .product-banner p{line-height: 48px; margin-top: 28px;margin-bottom: 40px;} .school-wrap .area-wrap{min-width:1350px} .school-wrap .area-wrap .img-area{width: 50%; position: relative;} .school-wrap .area-wrap .content-area{width: 50%;} .school-wrap .area-wrap .part-1{padding-top: 87px; height: 380px;} .school-wrap .area-wrap .part-1 h1{font-size: 30px;margin-top: 80px;} .school-wrap .area-wrap .part-1 p{margin-top: 40px; font-size: 16px; line-height: 34px;} .school-wrap .area-wrap .part-1 img{position: absolute; top: 0; left: -100px;} .school-wrap .area-wrap .part1-wrap{overflow: hidden; height: 470px; background: url(../images/product/school/part1-bg.png) no-repeat center;-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);} .school-wrap .area-wrap .c-title{position: absolute; text-align: center;font-size: 30px; font-weight: bold; top: -120px; left: 50%; margin-left: -60px;} .school-wrap .area-wrap .part-2{margin-top: 100px; height: 451px; position: relative; background: url(../images/product/school/part2-bg.png);} .school-wrap .area-wrap .part-2 img{position: absolute;top: 50px; right: 25px; } .school-wrap .content-area .area-title{font-size: 32px; margin-top: 20px; margin-bottom: 40px;font-weight: bold;font-style: italic;} .school-wrap .content-area .area-cont-item{font-size: 18px; line-height: 36px;position: relative; margin-bottom: 15px;width: 470px;font-style: italic;} /* .school-wrap .content-area .area-cont-item::before{content: ""; display: block;width: 4px; height: 4px; background-color: #333; position: absolute; top: 10px; left: 5px;} */ .school-wrap .area-wrap .part-2 .content-area{margin-top: 40px;} .school-wrap .area-wrap .part-3 {margin-top: 100px; height: 451px; background: url(../images/product/school/part3-bg.png) no-repeat center;} .school-wrap .area-wrap .part-3 img{position: absolute;top: 25px;left: 5px;} .school-wrap .area-wrap .part-3 .img-area img:nth-of-type(2){right:47px; bottom: 40px;} .school-wrap .part-3 .content-area{padding-left: 110px; padding-top: 70px;-webkit-box-sizing: border-box;box-sizing: border-box;} .school-wrap .part-4{margin-top:100px; height: 451px;background: url(../images/product/school/part2-bg.png) no-repeat center;} .school-wrap .part-4 .img-area img{position: absolute;} .school-wrap .part-4 .img-area img{top: 50px; right: 35px;} .school-wrap .part-4 .img-area img:nth-of-type(2){ left: -17px; top: 266px;} .school-wrap .part-4 .area-cont-item{width: 506px;} .school-wrap .part-4 .content-area{ margin-top: 40px;} .school-wrap .part-5{height: 451px;margin-top: 100px; background: url(../images/product/school/part3-bg.png) no-repeat center;margin-bottom:100px; } .school-wrap .part-5 .swiper-wrap{width: 488px;height: 308px;position: absolute;border-radius: 10px;box-sizing: border-box;box-shadow: 0 0 20px rgba(0, 0, 0, .2); left: 35px;top: 55px;background: #fff;} .school-wrap .part-5 .swiper-wrap .text{line-height: 50px;text-align: center;font-size: 18px;color: #999;} .school-wrap .part-5 .left{position: relative;} .school-wrap .part-5 .swiper-container{width: 100%;height: 100%;border-radius: 10px;overflow: hidden;} .school-wrap .part-5 .swiper-slide{overflow: hidden;text-align: center;} .school-wrap .part-5 .prev, .school-wrap .part-5 .next{width: 25px;height: 25px;background: url(../images/product/school/prev-icon.png);position: absolute; left: -45px;top: 48%;cursor: pointer;} .school-wrap .part-5 .next{transform: rotate(180deg);left: auto;right: -45px;} .school-wrap .part-6{height: 400px; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #ECECEC;border-bottom: 1px solid #ececce; background-color: #fff;} .school-wrap .part-6 .inner{height: 100%;} .school-wrap .part-6 .cont{width: 421px; border-right: 1px solid #ECECEC; height: 100%; float: left;-webkit-box-sizing: border-box;box-sizing: border-box;} .school-wrap .part-6 .item2{width: 388px;} .school-wrap .part-6 .item3{width: 388px;} .school-wrap .part-6 .item1{background: url(../images/product/teach/part5-icon.png) no-repeat center left; height: 398px;} .school-wrap .part-6 .item1 h1{font-size: 30px;margin-top: 48px;} .school-wrap .part-6 .item1 p{line-height: 34px; font-size: 24px; color: #666; font-weight: 200; margin-top: 20px; width: 340px;} .school-wrap .part-6 .item2{background: url(../images/product/teach/part5-img1.png) no-repeat 63px 63px; padding: 0 25px;} .school-wrap .part-6 .item3{background: url(../images/product/teach/part5-img2.png) no-repeat 63px 63px;padding: 0 25px;} .school-wrap .part-6 .item2 h1, .school-wrap .part-6 .item3 h1{ font-size: 18px; margin-top: 310px; font-weight: normal; text-align: center; } .school-wrap .part-6 .w-1200{height: 100%;} .school-wrap .part-6 .item2 p, .school-wrap .part-6 .item3 p{line-height: 26px; font-size: 14px; color: #666; text-align: justify; margin-top: 14px;} .school-wrap .area-list .area-cont-item:last-of-type{position: relative;} .school-wrap .area-wrap .function{background: url(../images/product/test/background.png) no-repeat center 450px #fff;} .school-wrap .content-area .icon{background: url(../images/product/school/part2-icon.png) no-repeat center;width: 60px;height: 46px;} .school-wrap .part-3 .content-area .icon{background-image:url(../images/product/school/part3-icon.png);} .school-wrap .part-4 .content-area .icon{background-image:url(../images/product/school/part4-icon.png);} .school-wrap .part-5 .content-area .icon{background-image:url(../images/product/school/part5-icon.png);} .school-wrap .img-area .under-title{font-size: 18px; color: #999;text-align: center;margin-top: 380px;} .school-wrap .part-4 .img-area .under-title{color: #fff;} /* .school-wrap .part-5 img{position: absolute; top: 25px;left: 5px;} */ .school-wrap .part-5 .content-area{ padding-top: 60px;padding-left: 100px;-webkit-box-sizing: border-box;box-sizing: border-box;} .school-wrap .part-7{height: 554px;} .school-wrap .part-7 .title{font-size: 30px;line-height: 34px;text-align: center;font-weight: bold;margin-top: 58px;margin-bottom: 35px;} .school-wrap .part-7 h1{font-weight: normal;text-align: center;color: #999; font-size: 18px;} .school-wrap .part-7 .left{float: left;} .school-wrap .part-7 .right{float: right;} /* 在线开放课程 */ .course-wrap{line-height: 1;min-width: 1350px;margin-top: -80px;} .course-wrap .banner{height: 600px;background: url(../images/product/course/banner.png) no-repeat center;text-align: center;color: #fff;} .course-wrap .banner h1{font-size: 60px;font-weight: normal; padding: 190px 0 44px;} .course-wrap .banner h2{font-size: 20px; font-weight: 200;} .course-wrap .banner .btn a{display: inline-block; width: 180px;height: 50px;line-height: 46px;text-align: center;font-size: 18px;color: #0B9FDE;margin-top: 110px;background: #fff; border-radius: 25px;-webkit-box-shadow: 0px 0px 10px 0px rgba(11, 159, 222, 0.32);box-shadow: 0px 0px 10px 0px rgba(11, 159, 222, 0.32);-webkit-transition: .3s;-o-transition: .3s;transition: .3s;-webkit-box-sizing: border-box;box-sizing: border-box;border: 2px solid #fff;} .course-wrap .banner .btn a:hover{background-color: #0B9FDE;color: #fff;border-color: #fff;} .course-wrap .part-1{height: 510px;background-color: #fcfcfc;position: relative;} .course-wrap .part-1 h1{font-size: 24px; text-align: center;padding: 80px 0 19px;} .course-wrap .part-1 .s-title{font-size: 18px;text-align: center; color: #999;} .course-wrap .part-1 li{float: left;width: 280px;text-align: center;margin-left: 93px;margin-top: 44px;} .course-wrap .part-1 li .year{ font-size: 14px; text-align: center;color: #7F7F8B;} .course-wrap .part-1 li.active .year{font-size: 18px;color: #333;} .course-wrap .part-1 li .dot{display: inline-block;width: 4px;height: 4px;background: #9596A7;border: 4px solid #F3F4F7; border-radius: 50%;margin: 22px 0 24px;} .course-wrap .part-1 li.active .dot{display: inline-block;width: 7px;height: 7px;background: #4663FC;border: 6px solid #fff; border-radius: 50%;margin: 15px 0 20px;} .course-wrap .part-1 li p{font-size: 16px;line-height: 28px;width: 280px;height: 117px;-webkit-box-sizing: border-box;box-sizing: border-box; padding: 15px;text-align: left;color: #999;} .course-wrap .part-1 li.active p{-webkit-box-shadow: 0px 0px 10px 0px rgba(70, 99, 252, 0.1);box-shadow: 0px 0px 10px 0px rgba(70, 99, 252, 0.1);border-radius: 10px;background: #fff;color: #333;} .course-wrap .part-1 li.active p span{color: #4663FC;} .course-wrap .part-1 li p span{color: #999;} .course-wrap .part-1 .w-1200{position: relative; z-index: 2;} .course-wrap .part-1 .line{border-top: 1px solid #CCCCCC;position: absolute;top: 227px;width: 100%;z-index: 1;} .course-wrap .part-2{height: 550px;background: url(../images/product/course/part2-bg.png) no-repeat center; } .course-wrap .part-2 h1{font-size: 24px;color:#fff; text-align: center;padding: 80px 0 40px;} .course-wrap .part-2 .swiper-container{width: 1100px;height: 500px;background-color: #fff;-webkit-box-shadow: 0px 0px 30px 0px rgba(70, 99, 252, 0.3);box-shadow: 0px 0px 30px 0px rgba(70, 99, 252, 0.3);border-radius: 10px;} .course-wrap .part-2 .swiper-container .title{font-size: 24px;color: #4663FC;position: relative;font-weight: bold;margin-bottom: 34px;} .course-wrap .part-2 .swiper-container .title::after{content:""; position: absolute;width: 90px;height: 10px;background: #4663FC;bottom: -5px;left: 48px;opacity: .1;} .course-wrap .part-2 .swiper-container img{margin: 0 auto;display: block;} .course-wrap .part-2 .swiper-container .swiper-slide{padding: 50px 60px;-webkit-box-sizing: border-box;box-sizing: border-box;} .course-wrap .part-2 .swiper-container .swiper-slide:nth-of-type(1) .title{margin-bottom: -20px;} .course-wrap .part-2 .swiper-container .swiper-slide:nth-of-type(3) .title{margin-bottom: 84px;} .course-wrap .part-2 .w-1200{position: relative;} .course-wrap .part-2 .prev-btn{width: 22px;height: 51px;background: url(../images/product/course/arr-left.png) no-repeat center;position: absolute;top: 52%;left: 0;cursor: pointer;} .course-wrap .part-2 .next-btn{width: 22px;height: 51px;background: url(../images/product/course/arr-right.png) no-repeat center;position: absolute;top: 52%; right: 0;cursor: pointer;} .course-wrap .part-2 .slide-num{font-size: 154px;font-weight: bold;opacity: .1;position: absolute; top: 32px; right: -32px;color: #fff;} .course-wrap .part-3{height: 793px; text-align: center;} .course-wrap .part-3 h1{font-size: 24px;padding: 174px 0 50px;} .course-wrap .part-4{height: 630px; background: #FCFCFC;} .course-wrap .part-4 h1{font-size: 24px;padding: 80px 0 50px;text-align: center;} .course-wrap .part-4 .computer{ width: 510px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s;} .course-wrap .part-4 .computer .bar{width: 100%; height: 37px; background-color: #4E4A67;border-radius: 10px 10px 0px 0px;} .course-wrap .part-4 .computer .window{width: 100%; height: 323px;background-color: #fff; padding: 15px; -webkit-box-sizing: border-box; box-sizing: border-box;} .course-wrap .computer li{width: 13px;height: 13px; background: #6C668D; border-radius: 50%; float: left; margin-right: 14px;margin-top: 12px;} .course-wrap .computer li:first-child{margin-left: 27px;} .course-wrap .part-4 p{font-size: 20px; text-align: center;margin-top: 18px;-webkit-transition: .3s;-o-transition: .3s;transition: .3s;} .course-wrap .part-4 .w-1200 > ul > li{float: left;cursor: pointer;} .course-wrap .part-4 .w-1200 > ul > li:first-child{margin: 0 81px 0 50px;} .course-wrap .part-4 .w-1200 > ul > li:hover .computer{-webkit-box-shadow: 0 0 20px rgba(70, 99, 252, .2);box-shadow: 0 0 20px rgba(70, 99, 252, .2);} .course-wrap .part-4 .w-1200 > ul > li:hover p{color: #4663FC;} /* 教育部协同育人 */ .edu-wrap{line-height: 1;min-width: 1350px;} .edu-wrap .banner{height: 550px;text-align: center;color: #fff; background: url(../images/product/edu/banner.png) no-repeat center;} .edu-wrap .banner h1{font-size:48px ;padding: 225px 0 38px;} .edu-wrap .banner h2{font-size: 24px;font-weight: normal;} .edu-wrap .part-1{height: 679px; background:url(../images/product/edu/part1-bg.png) no-repeat center 430px; position: relative;} .edu-wrap .part-1 h1{font-size: 32px;padding: 100px 0 20px; text-align: center;} .edu-wrap .part-1 p{font-size: 16px; line-height: 32px; text-align: center;} .edu-wrap .part-1 .w-1200{position: relative;} .edu-wrap .part-1 .text{background: #fff; display: none; position: absolute; right: 0;top: 275px; width: 430px;height: 160px; padding: 13px;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px; line-height: 24px;border-radius: 10px;-webkit-box-shadow: 0px 0px 10px 0px rgba(59, 95, 206, 0.3);box-shadow: 0px 0px 10px 0px rgba(59, 95, 206, 0.3);} .edu-wrap .part-1 .nav-title{font-size: 16px;position: absolute; opacity: 0.5;cursor: pointer;} .edu-wrap .part-1 .nav-title.active{color: #3B5FCE;opacity: 1;} .edu-wrap .part-1 .nav-title.item1{top: 545px; left: 100px;} .edu-wrap .part-1 .nav-title.item2{top: 439px;left: 270px;} .edu-wrap .part-1 .nav-title.item3{top: 447px; left: 880px;} .edu-wrap .part-1 .text1{ top: 362px;left: -5px;} .edu-wrap .part-1 .text2{top: 265px; left: 0;} .edu-wrap .part-2{height: 520px;background: url(../images/product/edu/part2-bg.png) no-repeat center;} .edu-wrap .part-2 h1{font-size: 32px; text-align: center; color: #fff;padding: 100px 0 30px;} .edu-wrap .part-2 h2{font-size: 16px; font-weight: normal; text-align: center; padding-bottom: 40px;color: #fff;} .edu-wrap .part-2 ul{-webkit-box-shadow: 0px 0px 20px 0px rgba(59, 95, 206, 0.3);box-shadow: 0px 0px 20px 0px rgba(59, 95, 206, 0.3);} .edu-wrap .part-2 li{float: left;width: 600px;height: 408px;background: no-repeat center 35px #fff;-webkit-box-shadow: 0px 0px 20px 0px rgba(59, 95, 206, 0.3);box-shadow: 0px 0px 20px 0px rgba(59, 95, 206, 0.3);position: relative;} .edu-wrap .part-2 li:first-child{background-image: url(../images/product/edu/lt-logo.png);z-index: 2;} .edu-wrap .part-2 li:last-child{background-image: url(../images/product/edu/suke-logo.png);} .edu-wrap .part-3{height: 860px;} .edu-wrap .part-2 li .item-title{font-size: 20px; color: #1d1d3e;padding: 141px 0 20px; text-align: center;font-weight: bold;} .edu-wrap .part-2 li p{font-size: 16px;line-height: 32px;color: #999;padding: 0 40px;} .edu-wrap .part-2 li .dot{float: left; width: 4px;height: 4px;background-color: #5F44FD; border-radius: 50%;margin-left: 8px;} .edu-wrap .part-2 li .dot-box{margin: 20px 0 0 278px;} .edu-wrap .part-3{background: url(../images/product/edu/part3-bg.png) center no-repeat; height: 861px; } .edu-wrap .part-3 li{cursor: pointer; width: 663px; height: 69px; background: #fff;-webkit-box-shadow: 0px 0px 20px 0px rgba(59, 95, 206, 0.3);box-shadow: 0px 0px 20px 0px rgba(59, 95, 206, 0.3);border-radius: 10px;margin-bottom: 20px;-webkit-transition: .6s;-o-transition: .6s;transition: .6s; overflow: hidden;} .edu-wrap .part-3 ul{float: right;margin-top: 125px;} .edu-wrap .part-3 li.active{height: 222px;} .edu-wrap .part-3 li .title{font-size: 22px;color: #5F44FD;font-weight: bold;padding: 15px 32px;position: relative;} .edu-wrap .part-3 li .title::before{content: ""; position: absolute;width: 30px;height: 30px;top: 21px; left: 19px; background: url(../images/product/edu/circle.png) no-repeat; } .edu-wrap .part-3 li .title span{font-size: 32px; padding-right: 15px;} .edu-wrap .part-3 p{display: none; font-size: 14px;line-height: 28px; padding: 0 21px 0 84px;} .edu-wrap .part-3 li.active p{display: block;} /* 服务-资源制作 */ .server3-wrap{line-height: 1;min-width: 1350px;margin-top:-80px;} .server3-wrap .banner{height: 550px;text-align: center;color: #fff; background: url(../images/product/make/banner.png) no-repeat center;} .server3-wrap .banner h1{font-size:48px ;padding: 225px 0 38px;} .server3-wrap .banner h2{font-size: 24px;font-weight: normal;} .server3-wrap .nav-bar{height: 60px;-webkit-box-sizing: border-box;box-sizing: border-box;border: 1px solid #EEEEEE; background-color: #FFF;width: 100%;position: absolute; min-width: 1350px;} .server3-wrap .nav-bar.sticky{position: fixed; top: 0; z-index: 999;background-color:#fff;} .server3-wrap .nav-bar ul{margin: 0 auto;width: 864px;padding-left: 336px;} .server3-wrap .nav-bar li{float: left;line-height: 59px;margin:0px 80px;font-size: 18px;position: relative; cursor: pointer;} .server3-wrap .nav-bar li.active{font-weight: bold;color: #c7403b;} .server3-wrap .nav-bar li.active::after{content:"";position: absolute;width: 50px;height: 2px;background-color: #c7403b;left: 50%;margin-left: -25px;bottom: 1px;} .server3-wrap .ppt{display: none;margin-top: 60px;} .server3-wrap .ppt .part-1{height: 480px;background-color: #FBFBFB;padding-top: 79px;} .server3-wrap .ppt .part-1 .card{height: 381px;width: 1200px;margin: 0 auto;background-color: #fff;border-radius: 20px;padding: 20px;-webkit-box-sizing: border-box;box-sizing: border-box;} .server3-wrap .ppt .part-1 .card li{height: 340px;width: 50%;-webkit-box-sizing: border-box;box-sizing: border-box;float: left;} .server3-wrap .ppt .part-1 .card li:first-child{border-right: 1px solid #EEE;} .server3-wrap .ppt .part-1 .card li p{font-size: 16px;line-height: 34px;width: 460px;margin: 48px auto 16px;} .server3-wrap .ppt .part-1 .card li .item{font-size: 14px;line-height: 34px ;width:460px;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0 auto;padding-left: 30px;color: #999;position: relative;} .server3-wrap .ppt .part-1 .card li .item::before{content:"";position: absolute;width: 6px;height: 6px;border: 1px solid #C7403B; border-radius: 50%;left: 9px;top: 12px;} .server3-wrap .ppt .part-1 .card li img{margin: 28px 0 0 72px;} .server3-wrap .ppt .part-2{height: 648px;text-align: center;} .server3-wrap .ppt .part-2 .w-1200{background: url(../images/product/make/suke-part2-bg.png) no-repeat center 72px;} .server3-wrap .ppt .part-2 p{width: 938px; margin: 0 auto 90px;line-height: 30px;font-size: 16px;padding-top: 107px;} .server3-wrap .ppt .part-3{background: #FBFBFB;height: 431px;padding-top: 63px;} .server3-wrap .ppt .part-3 li{width: 546px;height: 316px;float: left;background: #FFFFFF;-webkit-box-shadow: 0px 0px 30px 0px rgba(189, 189, 189, 0.5);box-shadow: 0px 0px 30px 0px rgba(189, 189, 189, 0.5);border-radius: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 10px;position: relative;} .server3-wrap .ppt .part-3 li~li{margin-left: 81px;} .server3-wrap .ppt .part-3 li .qrcode{opacity: 0; width: 527px; height: 297px;background: rgba(199, 64, 59, .9);position: absolute;top: 10px;left: 10px;-webkit-transition: .3s;-o-transition: .3s;transition: .3s;} .server3-wrap .ppt .part-3 li .qrcode img{margin: 75px auto 0;display: block;} .server3-wrap .ppt .part-3 li:hover .qrcode{opacity: 1;} .server3-wrap .ppt .part-3 p{position: absolute;width: 100%;text-align: center;font-size: 20px;top: 345px;} .server3-wrap .ppt .part-4{height: 400px; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #ECECEC;border-bottom: 1px solid #ececce; background-color: #fff;} .server3-wrap .ppt .part-4 .inner{height: 100%;} .server3-wrap .ppt .part-4 .cont{width: 421px; border-right: 1px solid #ECECEC; height: 100%; float: left;-webkit-box-sizing: border-box;box-sizing: border-box;} .server3-wrap .ppt .part-4 .item2{width: 388px;} .server3-wrap .ppt .part-4 .item3{width: 388px;} .server3-wrap .ppt .part-4 .item1{background: url(../images/product/teach/part5-icon.png) no-repeat center left; height: 398px;width: 812px;} .server3-wrap .ppt .part-4 .item1 h1{font-size: 30px;margin-top: 48px;} .server3-wrap .ppt .part-4 .item1 p{line-height: 34px; font-size: 24px; color: #666; font-weight: 200; margin-top: 20px; width: 340px;} .server3-wrap .ppt .part-4 .item2{background: url(../images/product/teach/part5-img1.png) no-repeat 63px 63px; padding: 0 25px;} .server3-wrap .ppt .part-4 .item3{background: url(../images/product/teach/part5-img2.png) no-repeat 63px 63px;padding: 0 25px;} .server3-wrap .ppt .part-4 .item3 h1{font-size: 18px; margin-top: 310px; font-weight: normal; text-align: center;line-height: 30px;} .server3-wrap .ppt .part-4 .w-1200{height: 100%;} .server3-wrap .ppt .part-4 .item2 p, .server3-wrap .ppt .part-4 .item3 p{line-height: 26px; font-size: 14px; color: #666; text-align: justify; margin-top: 14px;} .server3-wrap .video{margin-top: 60px;display: none;} .server3-wrap .video .part-1{height: 722px; background: url(../images/product/make/vdieo-part1.jpg) no-repeat center bottom #F0F0F0;} .server3-wrap .video .part-2{height: 770px;width: 100%;} .server3-wrap .video .part-2 .w-1200{background: url(../images/product/make/video-part2-bg.png) no-repeat center;height:100%;overflow: hidden;} .server3-wrap .video .part-2 ul{ margin-top: 180px;overflow: hidden;margin-left: 30px;width: 1120px;} .server3-wrap .video .part-2 ul li{height: 50px;line-height: 50px;border-bottom: 1px solid #fff;font-size: 14px;color: #666;} .server3-wrap .video .part-2 ul li:first-child{ height: 60px;line-height: 60px;font-weight: bold;font-size: 16px;color: #333;} .server3-wrap .video .part-2 ul li:nth-child(2n-1) *{background: #E7E7E7;} .server3-wrap .video .part-2 ul li:nth-child(2n) *{background: #F0F0F0;} .server3-wrap .video .part-2 ul li:first-child *{background: #D9DDEB;} .server3-wrap .video .part-2 ul li .number{width: 100px;text-align: center;float: left;border-right: 1px solid #fff;height: 100%;} .server3-wrap .video .part-2 ul li .name{width: 199px;text-align: center;float: left;border-right: 1px solid #fff;height: 100%;} .server3-wrap .video .part-2 ul li .type{width: 409px;float: left;text-align: center;border-right: 1px solid #fff;height: 100%;} .server3-wrap .video .part-2 ul li .require{ width: 409px;float: left;text-align: center;height: 100%;} .server3-wrap .video .part-3{background: #F0F0F0;width: 100%;height: 420px;} .server3-wrap .video .part-3 .w-1200{background: url(../images/product/make/video-part3-bg.png) no-repeat center 65px;width: 1200px;height: 100%;margin: 0 auto;overflow: hidden;} .server3-wrap .video .part-3 ul{width: 1220px;margin-top: 160px;} .server3-wrap .video .part-3 ul li{border: 1px solid #F0F0F0;float: left;margin-right: 18px;cursor: pointer;} .server3-wrap .video .part-3 ul li:hover{border-color: #CB3939} .server3-wrap .video .part-3 ul li a{width: 224px;height: 189px;position: relative;display: block;} .server3-wrap .video .part-3 ul li img{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;} .server3-wrap .video .part-3 ul li p{text-align: center;font-size: 14px;color: #fff;width: 224px;height: 35px;line-height: 35px;background: #C03A38;position: absolute;bottom: 0px;left: 0px;} .server3-wrap .video .part-3 ul li span{position: absolute;display: block;width: 100%;height: 157px;top: 0px;left: 0px;background: url(../images/product/make/aera4-zz.png) no-repeat;-webkit-transition: all .3s 0s ease;-o-transition: all .3s 0s ease;transition: all .3s 0s ease;} .server3-wrap .video .part-3 ul li:hover span{opacity: .7;} .server3-wrap .video .part-4{height: 990px;background-color: #F9F9F9;} .server3-wrap .video .part-4 .inner{background: url(../images/product/make/video-part4-bg.jpg) no-repeat center center;overflow: hidden;height: 100%;} .server3-wrap .video .part-4 ul{ margin-top: 190px;overflow: hidden;margin-left: 30px;width: 1120px;} .server3-wrap .video .part-4 ul li{height: 50px;line-height: 50px;border-bottom: 1px solid #fff;font-size: 14px;color: #666;} .server3-wrap .video .part-4 ul li:first-child{height: 60px;line-height: 60px;font-weight: bold;font-size: 16px;color: #333;} .server3-wrap .video .part-4 ul li:nth-child(2n-1) *{background: #E7E7E7;} .server3-wrap .video .part-4 ul li:nth-child(2n) * {background: #F0F0F0;} .server3-wrap .video .part-4 ul li:first-child *{background: #D9DDEB;} .server3-wrap .video .part-4 ul li .college{width: 220px;text-align: center;float: left;border-right: 1px solid #fff;height: 100%;} .server3-wrap .video .part-4 ul li .name{width: 394px;text-align: center;float: left;border-right: 1px solid #fff;height: 100%;} .server3-wrap .video .part-4 ul li .honor{width: 394px;float: left;text-align: center;border-right: 1px solid #fff;height: 100%;} .server3-wrap .video .part-4 ul li .ranking{width: 109px;float: left;text-align: center;height: 100%;} .server3-wrap .h5 .part-1{height: 595px;} .server3-wrap .h5 .inner{width: 1200px;margin: 0 auto;} .server3-wrap .h5 .part-1 .inner{ padding-top: 140px;} .server3-wrap .h5 .part-1 .title { height: 26px; background: url(../images/product/make/Micro-row1-title.png) no-repeat center; } .server3-wrap .h5 .part-1 p { width: 980px; margin: 0 auto; margin-top: 30px; font-size: 14px; color: #333333; line-height: 30px; } .server3-wrap .h5 .part-1 .bot { width: 800px; margin: 0 auto; margin-top: 80px; } .server3-wrap .h5 .part-1 .bot ul { width: 900px; } .server3-wrap .h5 .part-1 .bot ul li { width: 100px; height: 122px; position: relative; float: left; margin-right: 40px; } .server3-wrap .h5 .part-1 .bot ul li img { width: 100%; border-radius: 50%; } .server3-wrap .h5 .part-1 .bot ul li span { position: absolute; bottom: 0; font-size: 14px; color: #48b57b; display: block; text-align: center; width: 100%; height: 14px; line-height: 14px; } .server3-wrap .h5 .part-1 .bot ul li .text { position: absolute; top: -47px; right: -52px; width: 65px; height: 65px; border-radius: 50%; background-color: #48b57b; text-align: center; line-height: 65px; color: #fff; font-size: 14px; } .server3-wrap .h5 .part-2 { height: 398px; background-color: #f0f0f0; } .server3-wrap .h5 .part-2 .inner { padding-top: 78px; } .server3-wrap .h5 .part-2 .title { height: 31px; background: url(../images/product/make/Micro-row2-title.png) no-repeat center; } .server3-wrap .h5 .part-2 ul { padding-left: 40px; padding-top: 40px; width: 1200px; } .server3-wrap .h5 .part-2 ul li { margin-bottom: 40px; width: 350px; height: 70px; float: left; margin-right: 50px; } .server3-wrap .h5 .part-2 ul li .icon { width: 80px; float: left; padding-top: 5px; } .server3-wrap .h5 .part-2 ul li .text { float: left; width: 270px; } .server3-wrap .h5 .part-2 ul li .text .h4 { font-size: 16px; color: #333; font-weight: bold; padding-bottom: 12px; height: 16px; line-height: 16px; } .server3-wrap .h5 .part-2 ul li .text p { line-height: 20px; font-size: 14px; color: #333333; } .server3-wrap .h5 .part-3 { height: 510px; padding-top: 80px; } .server3-wrap .h5 .part-3 .title { height: 36px; background: url(../images/product/make/Micro-row3-title.png) no-repeat center; } .server3-wrap .h5 .part-3 .left { width: 440px; margin-left: 110px; margin-top: 35px; height: 360px; overflow: hidden; float: left; } .server3-wrap .h5 .part-3 .left .h4 { font-size: 16px; font-weight: bold; background-color: #2fa394; border-radius: 17px; width: 150px; height: 35px; line-height: 35px; text-align: center; color: #fff; margin: 0 auto; } .server3-wrap .h5 .part-3 .left ul { margin-top: 40px; padding-left: 30px; width: 440px; } .server3-wrap .h5 .part-3 .left ul li { margin-right: 40px; margin-bottom: 40px; position: relative; float: left; height: 122px; } .server3-wrap .h5 .part-3 .left ul li .icon { width: 98px; height: 98px; border: 1px solid #2fa394; border-radius: 50%; position: relative; } .server3-wrap .h5 .part-3 .left ul li .icon img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .server3-wrap .h5 .part-3 .left ul li span { font-size: 12px; color: #2fa394; height: 12px; line-height: 12px; position: absolute; bottom: 0; display: block; width: 100%; text-align: center; } .server3-wrap .h5 .part-3 .right { width: 240px; height: 360px; float: right; margin-right: 210px; margin-top: 35px; } .server3-wrap .h5 .part-3 .right .h4 { font-size: 16px; font-weight: bold; background-color: #3d8dbe; border-radius: 17px; width: 150px; height: 35px; line-height: 35px; text-align: center; color: #fff; margin: 0 auto; } .server3-wrap .h5 .part-3 .right ul { margin-top: 40px; width: 280px; } .server3-wrap .h5 .part-3 .right ul li { margin-right: 40px; margin-bottom: 40px; position: relative; float: left; height: 122px; } .server3-wrap .h5 .part-3 .right ul li .icon { width: 98px; height: 98px; border: 1px solid #3d8dbe; border-radius: 50%; position: relative; } .server3-wrap .h5 .part-3 .right ul li .icon img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .server3-wrap .h5 .part-3 .right ul li span { font-size: 12px; color: #3d8dbe; height: 12px; line-height: 12px; position: absolute; bottom: 0; display: block; width: 100%; text-align: center; } .server3-wrap .h5 .part-4 { padding-top: 79px; height: 798px; background-color: #f0f0f0; } .server3-wrap .h5 .part-4 .title { height: 31px; background: url(../images/product/make/Micro-row4-title.png) no-repeat center; } .server3-wrap .h5 .part-4 .cont { height: 580px; background: url(../images/product/make/Micro-row4-cont-bg.jpg) no-repeat center; position: relative; } .server3-wrap .h5 .part-4 .cont .bd { position: absolute; top: 97px; left: 403px; width: 422px; } .server3-wrap .h5 .part-4 .cont .bd ul { width: 422px; height: 362px; overflow: hidden; } .server3-wrap .h5 .part-4 .cont .bd li{position: absolute;} .server3-wrap .h5 .part-4 .cont .bd li .img { width: 202px; height: 362px; float: left; background: #333; } .server3-wrap .h5 .part-4 .cont .bd li .img img { width: 100%; height: 100%; } .server3-wrap .h5 .part-4 .cont .bd li .code-warp { float: left; height: 181px; width: 140px; margin-left: 80px; margin-top: 74px; text-align: center; } .server3-wrap .h5 .part-4 .cont .bd li .code-warp .name { font-size: 16px; height: 16px; line-height: 16px; font-weight: bold; } .server3-wrap .h5 .part-4 .cont .bd li .code-warp .code { height: 140px; margin-top: 25px; background: #000; } .server3-wrap .h5 .part-4 .cont .prev, .server3-wrap .h5 .part-4 .cont .next { cursor: pointer; width: 50px; height: 50px; border-radius: 50%; position: absolute; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .server3-wrap .h5 .part-4 .cont .prev { left: 0; top: 0; bottom: 0; margin: auto; background-image: url(../images/product/make/focus_btn_left.png); } .server3-wrap .h5 .part-4 .cont .next { right: 0; top: 0; bottom: 0; margin: auto; background-image: url(../images/product/make/focus_btn_right.png); } .server3-wrap .h5 .part-4 .cont .tips { font-size: 14px; color: #999999; position: absolute; left: 685px; top: 367px; } .server3-wrap .h5 .part-4 .bot { text-align: center; } .server3-wrap .h5 .part-4 .bot a { text-decoration: none; height: 52px; line-height: 52px; font-size: 16px; color: #333; } .server3-wrap .h5 .part-4 .bot .phone { width: 381px; height: 48px; border: 1px solid #48b57b; border-radius: 8px; margin: 0 auto; text-align: center; line-height: 48px; margin-bottom: 5px; font-size: 20px; color: #48b57b; } /* 慕课推荐 */ #mooc{line-height: 1; background:#FCFCFC;} #mooc .banner{min-width: 1200px; height: 550px; background: url("../images/product/mooc/banner.png")no-repeat center center;} #mooc .banner-title{height: 100%;background: url("../images/product/mooc/banner-title.png")no-repeat center center;} #mooc .area1{padding-top: 65px; box-sizing: border-box; background: #FCFCFC;} #mooc .area1 .area-content{margin-bottom: 78px; padding-bottom:20px;} #mooc .area1 .area-content ul{} #mooc .area1 .area-content li{height: 242px; padding: 20px; box-sizing: border-box; transition: all ease-in-out .3s; } #mooc .area1 .area-content li .hover-area{border-bottom: 1px solid #eee; height: 100% ; padding-bottom: 20px; overflow: hidden;} #mooc .area1 .area-content li img{width: 287px; height: 202px; float: left; margin-right: 40px;} #mooc .area1 .area-content li .area-text{overflow: hidden; padding-top: 29px; height: 100%; box-sizing: border-box; position: relative;} #mooc .area1 .area-text h3{font-size: 18px; margin-bottom: 16px; transition:all ease-in-out .3s;} #mooc .area1 .area-text p{font-size: 14px; color: #999; line-height: 24px; margin-bottom: 32px; transition:all ease-in-out .3s;} #mooc .area1 .area-text .details span{font-size: 14px; line-height: 1;} #mooc .area1 .area-text .details span:first-child{ padding-right: 19px; border-right: 1px solid #ccc;} #mooc .area1 .area-text .details span:last-child{ padding-left: 19px;color: #ccc;} #mooc .area1 .area-text .arrow{display: inline-block; width: 50px; height: 15px; background: url("../images/product/mooc/arrow-next.png")no-repeat center center; float: right; margin-right: 60px; opacity: 0; transition: all ease-in-out .3s;} #mooc .area1 .area-text .arrow a{ display: inline-block; width: 100%; height: 100%;} #mooc .area1 .area-content li:hover{background: #FFFFFF;box-shadow: 0px 0px 15px 0px rgba(199, 64, 59, 0.2); transform: translateX(20px);} #mooc .area1 .area-content li:hover h3{color:#C7403B} #mooc .area1 .area-content li:hover p{color:#C7403B} #mooc .area1 .area-content li:hover .arrow{opacity: 1; margin-right: 40px;} #mooc #pager{text-align:right; padding-bottom:110px;} /* 教师教科研项目指导 */ #guide{line-height: 1; min-width: 1200px;} /* guide-title */ #guide .title{display: inline-block; text-align: center;} #guide .title.white{color: #fff;} #guide .title.white::after{background: #fff;} #guide .title::after{content: ""; display: inline-block; width: 40px; height: 5px; background: #3FC380; margin-top: 15px; transition: all ease-in-out .3s;} #guide .title h3{font-size: 28px;} #guide .title:hover::after{width: 100%;} /* guide-banner */ #guide .banner{min-width: 1200px; height: 550px; background: url("../images/product/guide/banner.png")no-repeat center center;} #guide .banner-title{height: 100%;background: url("../images/product/guide/banner-title.png")no-repeat center center;} /* guide-area1 */ #guide .area1 .area-title{margin-top: 70px; text-align: center; margin-bottom: 60px;} #guide .area1 .area-content{text-align: center;} #guide .area1 .area-content ul{} #guide .area1 .area-content li{width: 380px; height: 200px;float: left; padding: 40px; box-sizing: border-box; margin-right: 30px; border-radius: 5px; box-shadow: 0px 0px 20px rgba(51, 51, 51, .3); cursor: pointer; text-align: left; transition: all ease-in-out .3s;} #guide .area1 .area-content li.pic1{ background: url("../images/product/guide/area1-1.png")no-repeat center center;} #guide .area1 .area-content li.pic2{ background: url("../images/product/guide/area1-2.png")no-repeat center center;} #guide .area1 .area-content li.pic3{ background: url("../images/product/guide/area1-3.png")no-repeat center center;} #guide .area1 .area-content li:last-child{margin-right: 0px;} #guide .area1 .area-content li a{color: #fff;} #guide .area1 .area-content li h3{display: inline-block; position: relative; } #guide .area1 .area-content li h3::after{content: ""; display: inline-block;width: 70px;height: 1px;background: #FFFFFF; opacity: 0.5; position: absolute; left: 0px; bottom: -10px;transition: all ease-in-out .3s;} #guide .area1 .area-content li p{width: 245px; line-height: 30px; margin-top: 22px; transition: all ease-in-out .3s;} #guide .area1 .area-content > span{display: inline-block; margin-top: 38px; color: #666; font-weight: bold; margin-bottom: 36px;} /* area1-动效 */ #guide .area1 .area-content li:hover{transform: translateY(-10px); box-shadow: 0px 13px 20px rgba(51, 51, 51, .3); } #guide .area1 .area-content li:hover h3::after{width: 100%;} #guide .area2{height: 610px; background: url("../images/product/guide/area2-bg.png")no-repeat center center;} #guide .area2 .area-title{padding-top: 69px; padding-bottom: 70px; text-align: center;} #guide .area2 .area-content{text-align: center;} #guide .area2 .area-content ul{margin-bottom: 30px;} #guide .area2 .area-content li{float: left; width: 285px;height: 130px;background: #FFFFFF;border-radius: 5px; padding: 25px 13px 32px 12px; box-sizing: border-box; text-align: center; margin-right: 20px; margin-bottom: 20px; cursor: pointer; transition: all ease-in-out .3s;} #guide .area2 .area-content li:first-child{margin-left: 160px;} #guide .area2 .area-content li:last-child{margin-right: 0px;} #guide .area2 .area-content li .num{display: inline-block; margin-bottom: 10px;width: 38px;height: 38px;line-height: 38px; background: #3FC380;border-radius: 50%; color: #fff; font-size: 29px; font-weight: bold;position: relative; } #guide .area2 .area-content li .num::after{content: ""; display: inline-block; width: 48px; height: 48px;background: #3FC380;opacity: 0.1;border-radius: 50%; position: absolute; left: -5px; top: -5px;} #guide .area2 .area-content li h3{font-size: 20px; color: #3FC380;} #guide .area2 .more{display: inline-block; padding: 12px 41px; color: #fff; border-radius: 20px; border: 1px solid #fff; cursor: pointer; transition: all ease-in-out .3s;} #guide .area2 .more a{color: #fff; transition: all ease-in-out .3s;} /* area2-动效 */ #guide .area2 .area-content li:hover{box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);} #guide .area2 .more:hover{background: #fff;} #guide .area2 .more:hover a{color: #3FC380;} /*右侧悬浮*/ .suspension{position: fixed;width: 50px;right: 20px;bottom: 60px;z-index: 9999;height:295px;} .suspension a{ position: relative; float: right;line-height: 50px;padding-left: 52px;width: 0px;text-align: center;font-size: 16px;color: #ffffff;display: block;height: 52px;margin-bottom: 10px;border-radius: 50%;background: url(../images/suspension-bg.png) no-repeat #FFFFFF;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2)} .suspension .wx{background-position: -2px -52px; -o-transition:all .2s 0s ease; -webkit-transition:all .2s 0s ease; transition:all .2s 0s ease; background-color: #C7403B;} .suspension .wx .qr-code{box-sizing: border-box; opacity: 0;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-transform-origin: top center;-ms-transform-origin: top center;transform-origin: top center; padding: 4px 4px;background: url('../images/index_new/suspension-qr-code-bg.png') no-repeat 100% 100%; background-size: 100% 100%; width: 322px; display: flex; align-items: center; height: 160px;position: absolute;left: -330px;top: -55px; -o-transition:all .2s 0s ease; -webkit-transition:all .2s 0s ease; transition:all .2s 0s ease;} .suspension .wx .qr-code img{float: left;} .suspension .wx:hover .qr-code{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1); opacity: 1;} .suspension .qq{background-position: 0px -162px; -o-transition:all .2s 0s ease; -webkit-transition:all .2s 0s ease; transition:all .2s 0s ease;} .suspension .dh{background-position: 1px -106px; -o-transition:all .2s 0s ease; -webkit-transition:all .2s 0s ease; transition:all .2s 0s ease;} .suspension .zd{margin-top: 47px;background-position: 1px 0px;} .suspension .tooltip{background: rgba(97,97,97,.9);opacity: 0; border-radius: 2px;color: #fff;line-height: 14px;font-size: 14px;padding: 16px; position: absolute; top: 4px; left: -100px; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0);} .suspension .dh .tooltip{left: -200px;} .suspension a:hover .tooltip{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center;opacity: 1;} /*资讯内页*/ #news{margin-top: 40px;} #news .wrapper{position: relative;} #news .main{width: 780px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px 40px; margin-right: 30px; background: #FFFFFF; -webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1); box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1); float: left; margin-bottom: 30px; } #news .article-header{border-bottom: 1px solid #e5e5e5; padding-bottom: 25px;} #news .article-header > h1{font-size: 20px; margin-bottom: 18px;} #news .article-header .title-detail > span{position: relative; margin-left: 30px; margin-right: 40px;} #news .article-header .title-detail > span::before{position: absolute; content: "";display: inline-block; left: -30px; top: 0px;} #news .title-detail span.calendar::before{background: url("../images/real-time-info/news/icon-calendar.png")no-repeat center center; width: 19px; height: 18px; top: 1px;} #news .title-detail span.eyes::before{background: url("../images/real-time-info/news/icon-eyes.png")no-repeat center center; width: 23px; height: 14px; top: 4px; } #news .article-content{line-height: 30px; padding-top: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } #news .article-content img{max-width:100%;} #news .slide{display: inline-block; position: relative;} #news .slide .slide-content{ width: 390px; background: #FFFFFF; -webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1); box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);float: right; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px 40px;} #news .slide .slide-content > h3{margin-bottom: 30px;} #news .slide .slide-content > ul li{margin-bottom: 30px; color: #666; font-size: 14px;} #news .slide .slide-content > ul li a:hover{color:#cb3939; } #news .article-paging {width: 780px;} #news .article-paging > span{position: relative; display: inline-block; width: 120px; height: 35px; text-align: center; border-radius: 20px; border: 1px solid #eee; line-height: 33px; cursor: pointer; margin-bottom: 70px; box-sizing: border-box; transition: all ease-in-out .3s;} #news .article-paging > span > a{display: inline-block;position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;font-size: 0px;} #news .article-paging > span:first-child{float:left;} #news .article-paging > span:last-child{float:right} #news .article-paging > span:hover{background: #C7403B; color: #ffff; border:1px solid #C7403B;} /* 案例文章详情内页 */ .case_show{line-height: 1; background:#fff!important;} .case_show .article{ background: #fff;} .case_show .article-header{padding-top: 60px; padding-bottom: 40px; border-bottom: 1px solid rgba(153, 153, 153, 0.3); text-align: center;} .case_show .article-header h3{font-size: 24px; margin-bottom: 17px;} .case_show .article-header .info{font-size: 14px; display: inline-block; color: #999; margin-bottom: 17px;} .case_show .article-header .info .views{float: left; margin-right: 30px;} .case_show .article-header .info .views::before{content: ""; display: inline-block; width: 21px; height: 13px; background: url("../images/case/eyes.png")no-repeat center center; margin-right: 10px;} .case_show .article-header .info .school{float: right; } .case_show .article-header .info .school::before{content: ""; display: inline-block; width: 16px; height: 14px; background: url("../images/case/cap.png")no-repeat center center; margin-right: 10px; } .case_show .article-header .info .school span, .case_show .article-header .info .views span{vertical-align:top;} .case_show .article-header .line{width: 40px;height: 5px;background: #C7403B; margin: 0 auto;} .case_show .article-content{line-height: 30px; padding-top: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .case_show .article-content img{max-width:100%;} .case_show .article-paging {width: 1200px; margin: 0 auto; padding-top:60px; margin-bottom:80px; background:#fff} .case_show .article-paging span{position: relative; display: inline-block; width: 120px; height: 35px; text-align: center; border-radius: 20px; border: 1px solid #eee; line-height: 33px; cursor: pointer;box-sizing: border-box; transition: all ease-in-out .3s;} .case_show .article-paging span > a{display: inline-block;position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;font-size: 0px;} .case_show .article-paging span:first-child{float:left;} .case_show .article-paging span:last-child{float:right} .case_show .article-paging span:hover{background: #C7403B; color: #ffff; border:1px solid #C7403B;} .manu { text-align: center; font-size: 12px;width:1200px; margin: 0 auto;} .manu a {border: #EDEDEF 1px solid; text-decoration: none; display: inline-block;height: 27px;width: 27px;line-height: 27px;margin-right: 10px;text-align: center;} .manu a:hover {background-color: #C7403B;color: #fff;} .manu .current {display: inline-block;width: 27px;height: 27px;border: 1px solid #EDEDEF;line-height: 27px;background-color: #C7403B;color: #fff!important;margin-right: 10px;text-align: center;} .manu .disabled {display: inline-block;width: 57px;height: 27px;line-height: 27px;border: 1px solid #EDEDEF; cursor:not-allowed;margin-right:10px;text-align: center;} .manu span:last-of-type{color: #999;} .manu span:last-of-type i{color :#333;font-style: normal;margin: 0 5px;} .polyv-video{ position: fixed; z-index: 9999999; background: rgba(0,0,0,.6); left: 0; top: 0; right: 0; bottom: 0; display: none;} .polyv-video-content{ width: 800px; height: 600px; position: absolute; left: 50%; margin-left: -400px; top: 50%; margin-top: -300px; background: #fff; } .polyv-video-content iframe{ width: 100%; height: 100%; } .polyv-video-close{ width: 60px; height: 60px; position: absolute; right: 20px; top: 20px; background:url(../images/product/make/video-close-btn.png) no-repeat center; cursor: pointer;}